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>