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>