# 表格

我们经常在 excel 中用到表格，用于统计数据和展示数据非常方便。

网页中也有表格。

# 表格的定义

表格有由三个主要标签组成：

table，表格，代表表格的开始和结束
tr，行
td，单元格

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
    <table border="1" width="200" height="100">
        <tr>
            <td>姓名</td>
            <td>选课</td>
            <td>分数</td>
        </tr>
        <tr>
            <td>Tom</td>
            <td>Java</td>
            <td>97</td>
        </tr>
        <tr>
            <td>Lily</td>
            <td>JavaScript</td>
            <td>97</td>
        </tr>
    </table>
</body>
</html>

默认的表格没有边框，可以添加基础的样式。

# 完整的表格

完成的表格结构一般有标题、表头单元格和表格单元格。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <table border="1" width="200" height="100">
        <caption>表格标题</caption>
        <tr>
            <th>姓名</th>
            <th>选课</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>Java</td>
            <td>97</td>
        </tr>
        <tr>
            <td>Lily</td>
            <td>JavaScript</td>
            <td>97</td>
        </tr>
    </table>
</body>
</html>

为了让表格结构更加清晰，可以使用语义化标签 thead、tbody 和 tfoot。

这三个语义化标签对表格展示没有任何影响，只是可以让代码结构更加清晰，结合 CSS 分块控制会更加方便。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <table border="1" width="200" height="100">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>选课</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>Java</td>
                <td>97</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Lily</td>
                <td>JavaScript</td>
                <td>97</td>
            </tr>
        </tfoot>

    </table>
</body>
</html>

# 表格合并

（1）合并行：rowspan

rowspan 代表行合并的个数，下例中，Tom 同时选修了2门课程，应该这样表示。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <table border="1" width="200" height="100">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>选课</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">Tom</td>
                <td>Java</td>
                <td>97</td>
            </tr>
            <tr>
                <td>JavaScript</td>
                <td>97</td>
            </tr>
            <tr>
                <td>Liby</td>
                <td>Python</td>
                <td>99</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

（2）合并列：colspan

colspan 代表合并列的个数。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <table border="1" width="200" height="100">
        <caption>表格标题</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>选课</th>
                <th>分数</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td colspan="2">Java 缺考</td>
            </tr>
            <tr>
                <td>Liby</td>
                <td>Python</td>
                <td>99</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

← 基础表单 →