网页设计中th和td的区别

在网页设计中，``（Table Header）和 ``（Table Data）是 HTML 表格中两种不同的单元格标签，它们的区别主要体现在 语义、默认样式 和 使用场景 上。

1. 语义区别

``

表示表格的 标题单元格（Header Cell），用于定义表格的列或行的标题（如“姓名”“价格”“日期”等）。

语义作用：帮助屏幕阅读器等辅助工具识别表头，提升可访问性（Accessibility）。

``

表示表格的 数据单元格（Data Cell），用于填充具体的数据内容（如“张三”“100元”“2023-10-01”等）。

语义作用：仅表示普通数据，不具备标题的语义。

2. 默认样式区别

``

默认文本 加粗（`font-weight: bold`）。

默认内容 居中对齐（`text-align: center`）。

背景色可能因浏览器不同略有差异（通常是浅灰色）。

``

默认文本为 普通字体（不加粗）。

默认内容 左对齐（`text-align: left`）。

背景色通常为透明。

3. 使用场景

``

用于表格的 标题行或标题列，常见于第一行或第一列。

可以通过 `scope` 属性明确表头的作用范围：

`scope="col"`：表示列标题（如“姓名”“年龄”）。

`scope="row"`：表示行标题（如左侧的类别名称）。

html

姓名 年龄

``

用于填充 具体数据，必须放在 ``（表格行）中。

无特殊属性，仅包裹数据内容。

html

张三 25

4. 可访问性与 SEO

`` 对屏幕阅读器友好，能明确表格结构，帮助用户理解数据关系。

如果误用 `` 代替 ``，可能导致辅助工具无*确解析表格内容，影响可访问性。

正确使用 `` 也有助于搜索引擎理解页面内容的结构。

示例代码

html

商品名称	价格	库存
T恤	¥99	50
牛仔裤	¥199	30

用 ``：表格标题（列或行的标题），强调语义和可访问性。

用 ``：普通数据内容，无需特殊语义。

通过 CSS 可以自定义两者的样式，但应优先保证语义正确性。