html中的表格屬性以及合并操作

表格用table定義，標簽標題用caption標簽定義；用tr定義表格的若干行；用td定義若干個單元格；（當單元格是表頭時，用th標簽定義）（th標簽會略粗于td標簽）

table的整體外觀取決于屬性，border：定義表格邊框的粗細
width：定義表格的寬度
height：定義表格的寬度
cellspacing：定義表項間隙，i為像素數
cellpadding：定義表項內部空白，j為像素數

例子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格示例</title>
</head>
<body><table><caption>班級名單</caption><tr><th>姓名</th><th>性別</th><th>專業</th></tr><tr><td>張三豐</td><td>男</td><td>大數據與信息處理技術</td></tr><tr><td>李四萍</td><td>女</td><td>軟件工程</td></tr><tr><td>王五一</td><td>女</td><td>計算機科學與技術</td></tr></table><table border="1" cellspacing="10" cellpadding="20"><caption>班級名單</caption><tr><th>姓名</th><th>性別</th><th>專業</th></tr><tr><td>張三豐</td><td>男</td><td>大數據與信息處理技術</td></tr><tr><td>李四萍</td><td>女</td><td>軟件工程</td></tr><tr><td>王五一</td><td>女</td><td>計算機科學與技術</td></tr></table>
</body>
</html>

跨行單元格：

?合并單元格：跨行單元格就是豎向合并，跨列單元格就是橫向合并。在th標簽當中，可以使用rowspan和colspan兩個屬性，分別表示單元格縱跨多少行和橫跨多少列。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>跨行跨列表格示例</title>
</head>
<body><table width="300" border="2"><tr><td colspan="3">課程成績</td> <!-- 設置單元格水平跨 3 列 --></tr><tr><td rowspan="2">語文</td> <!-- 設置單元格垂直跨 2 行 --><td>期中</td><td>89</td></tr><tr><td>期末</td><td>92</td></tr><tr><td rowspan="2">英語</td> <!-- 設置單元格垂直跨 2 行 --><td>期中</td><td>95</td></tr><tr><td>期末</td><td>90</td></tr></table>
</body>
</html>

?用thead、tbody和tfooter標簽實現表格分組

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>分組表格示例</title>
</head>
<body><table border="0" width="420"><!-- 設置表格寬度為 420px，無邊框 --><caption>成績匯總表</caption><thead style="background:#FAF0E6"><!-- 設置表格的頁眉 --><tr><th>姓名</th><th>語文</th><th>數學</th><th>英語</th></tr></thead><!-- 表格頁眉結束 --><tbody style="background:#FFFAF0"><!-- 設置表格主體 --><tr><td>張三豐</td><td>90</td><td>92</td><td>98</td></tr><tr><td>李四萍</td><td>96</td><td>100</td><td>90</td></tr><tr><td>王五一</td><td>93</td><td>97</td><td>97</td></tr></tbody><!-- 表格主體結束 --><tfoot style="background:#FAF0E6"><!-- 設置表格的數據頁腳 --><tr><td>平均分數</td><td>93</td><td>96</td><td>95</td></tr></tfoot><!-- 表格頁腳結束 --></table>
</body>
</html>

?用colgroup和col來調整列的格式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>分組表格示例</title>
</head>
<body><table border="1"><colgroup><col width="150" style="background:#FFFAF0"><col width="100" style="background:#8d8d8d"><col width="200" style="background:#FFFAF0"></colgroup><tr><th>姓名</th><th>性別</th><th>專業</th></tr><tr><td>張三豐</td><td>男</td><td>大數據與信息處理技術</td></tr><tr><td>李四萍</td><td>女</td><td>軟件工程</td></tr><tr><td>王五一</td><td>女</td><td>計算機科學與技術</td></tr></table>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/894697.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/894697.shtml
英文地址，請注明出處：http://en.pswp.cn/news/894697.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！