html tr td标签

在 HTML 中，`` 和 `` 是构建表格的核心标签，通常与 `` 结合使用。以下是它们的详细说明：

`

` 标签（Table Row）

作用：定义表格中的一行（行容器）。

用法：

必须嵌套在 `

` 或 `//` 中。

包含一个或多个 `

` 中。

可包含文本、图片、链接或其他 HTML 元素。

常用属性（部分在 HTML5 中建议用 CSS 替代）：

`colspan`: 横向合并单元格（如 `colspan="2"` 占两列）。

`rowspan`: 纵向合并单元格（如 `rowspan="2"` 占两行）。

`align`（已废弃）: 水平对齐（用 CSS 的 `text-align` 替代）。

`valign`（已废弃）: 垂直对齐（用 CSS 的 `vertical-align` 替代）。

示例：

html

`（数据单元格）或 `	`（表头单元格）。 示例： html 第一行 > 第二行 > 单元格1 单元格2 单元格3 单元格4 `	` 标签（Table Data） 作用：定义表格行中的一个普通单元格，存放数据。 用法： 必须嵌套在 `

普通单元格	合并两列
合并两行	单元格A	单元格B
	单元格C	单元格D

与 `` 的区别

`` 表示表头单元格，通常用于列或行的标题（默认加粗居中）。

`` 表示普通数据单元格。

示例：

html

表头 >

数据 >

姓名	年龄
张三	30

最佳实践

1. 语义化：用表格展示结构化数据（如成绩单、日历），避免用于页面布局。

2. 样式控制：使用 CSS 替代废弃的属性（如 `align`, `valign`）。

3. 可访问性：为 `` 添加 `scope` 属性（如 `scope="col"` 或 `scope="row"`），帮助屏幕阅读器理解表格结构。

完整表格结构示例

html

商品	价格
苹果	￥5
香蕉	￥3

效果：

| 商品 | 价格 |

|||

| 苹果 | ￥5 |

| 香蕉 | ￥3 |

通过合理使用 `` 和 ``，可以构建清晰、易读的表格结构。