Investigator Veritatis

20-语义化表格

2 min read

1 语义化表格结构

上几篇的表格只用了 tr 和 td，结构上没有区分头部、主体、底部。HTML 提供了三个语义化标签来明确划分表格的不同区域：

  • <thead>：表格头部区域，通常放列标题行。
  • <tbody>：表格主体区域，放数据内容行。
  • <tfoot>：表格底部区域，通常放汇总、统计信息。

2 为什么要语义化

  • 结构清晰，代码可读性更高。
  • 便于 CSS 分区域设置样式。
  • 语义明确，有利于搜索引擎和屏幕阅读器理解表格内容。

3 结构示意

table
├── caption（表格标题）
├── thead（头部）
│   └── tr → th th th
├── tbody（主体）
│   └── tr → td td td
└── tfoot（底部）
    └── tr → td（colspan 合并整行）

4 标签总结

标签作用常放内容
<thead>表格头部th 列标题行
<tbody>表格主体td 数据行
<tfoot>表格底部汇总、统计信息

5 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <table border="1px" width="800px" height="300px" align="center">
        <caption>用户信息</caption>
 
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
 
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
            </tr>
 
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </tbody>
 
        <tfoot>
            <tr>
                <td colspan="4" align="right">共3条数据</td>
            </tr>
        </tfoot>
    </table>
</body>
 
</html>

Recent Notes

Graph View