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>