html th标签
HTML 中的 `基本用法
html
姓名 | 年龄 | 城市 |
---|---|---|
张三 | 25 | 北京 |
主要属性
1. `scope`
定义表头的关联范围,可选值:
html
2. `colspan` 和 `rowspan`
合并单元格(同 `html
3. `headers`
关联其他 `与 `` 的区别
| 标签 | 用途 | 默认样式 | 语义化意义 |
|||||
| ` ` | 表头单元格(标题) | 加粗、居中 | 表示数据类别 |
| ` ` | 普通数据单元格 | 常规、左对齐 | 表示具体数据 |
最佳实践
1. 语义化结构
使用 ` ` 明确区分标题和数据,提升可访问性和SEO效果。
2. 配合 ``, ``, ``
将表头包裹在 `` 中,数据放在 `` 内:
html
产品
价格
手机
¥2999
3. 样式定制
通过 CSS 自定义 `` 样式:
css
th {
background-color: f2f2f2;
padding: 12px;
text-align: left;
示例:复杂表格
html
学生信息
姓名
成绩
李四
90
通过合理使用 ` `,可以创建结构清晰、易于理解的表格,同时提升网页的可访问性和可维护性。
| 标签 | 用途 | 默认样式 | 语义化意义 |
|||||
| `最佳实践
1. 语义化结构
使用 `html
产品 | 价格 |
---|---|
手机 | ¥2999 |
3. 样式定制
通过 CSS 自定义 `css
th {
background-color: f2f2f2;
padding: 12px;
text-align: left;
示例:复杂表格
html
学生信息 | |
---|---|
姓名 | 成绩 |
李四 | 90 |