1 表头单元格 th

th(table header)是专门用于表头的单元格,用法与 td 完全一致,区别在于浏览器会对 th 的内容自动加粗并居中显示,语义上表示”这一列的标题”。

2 th 与 td 的区别

标签全称默认样式语义
<td>table data普通文字,左对齐普通数据单元格
<th>table header加粗 + 居中表头单元格

3 使用姿势

通常第一行全部用 th 作为列标题,后续数据行用 td

table
├── tr(表头行)
│   ├── th(编号)
│   ├── th(姓名)
│   └── th(...)
├── tr(数据行)
│   ├── td
│   └── td

4 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🫵 带表头的表格</title>
</head>
 
<body>
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
 
        <tr>
            <td>1</td>
            <td>张小三</td>
            <td>18</td>
            <td>男</td>
            <td>燕郊</td>
        </tr>
 
        <tr>
            <td>2</td>
            <td>张小三1</td>
            <td>12</td>
            <td>女</td>
            <td>北京</td>
        </tr>
    </table>
</body>
 
</html>