本文目录导读：
在 HTML 构建的网页世界里，表格（<table>）是最经典的数据展示方式之一，而作为表格的基本数据单元，<td> 元素（Table Data Cell，表格数据单元格）就像构成生命体的细胞，承载着每一条具体的信息，无论你是刚入门的前端新手，还是偶尔需要处理表格布局的开发者，理解 <td> 的用法和特性都至关重要。
<td> 是什么？
<td> 是 HTML 中用于定义表格数据单元格的标签，它必须放在 <tr>（表格行）元素内部,一个标准的表格结构如下：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>城市</td>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
</table>
渲染后，每一对 <td> 包裹的内容会占据表格中的一个格子，与之对应的 <th>（Table Header Cell）通常用于表头，默认加粗居中，而 <td> 默认是普通文本对齐。
核心属性与用法
跨列合并：colspan
当数据需要横跨多列显示时，使用 colspan 属性,例如合并两列的单元格：
<td colspan="2">合并两列</td>
跨行合并：rowspan
当数据需要纵向跨越多行时，使用 rowspan,比如合并两行：
<td rowspan="2">合并两行</td>
注意：合并之后，被“合并掉”的单元格需要从 HTML 中移除，否则会导致表格错乱。
对齐方式**
虽然 CSS 是更推荐的控制样式的方案，但 <td> 也支持一些传统属性，如 align（水平对齐：left/center/right）、valign（垂直对齐：top/middle/bottom），不过在现代开发中，更建议使用 CSS：
td {
text-align: center;
vertical-align: middle;
}
宽度与高度
可以通过 CSS 的 width 和 height 直接控制，也可以使用 <td> 的 width 属性（已废弃，不推荐），注意表格的宽度分配遵循一定规则，尽量使用 CSS。
语义化与可访问性
不要将所有单元格都写成 <td>，表头（如列名、行名）应该使用 <th>，并配合 scope 属性指明是行头还是列头，这对屏幕阅读器和 SEO 友好。
<tr> <th scope="col">产品</th> <th scope="col">价格</th> </tr>
<td> 本身没有特殊的语义，只表示数据，但你可以通过 headers 属性关联对应的表头 ID，以增强可访问性（复杂表格时使用）。
样式与布局禁区
历史上有人用 <table> 和 <td> 做网页布局（“表格布局”），但现在已被 CSS 布局（Flexbox、Grid）取代，表格布局会导致代码臃肿、难以响应式调整，且语义混乱。请牢记：<td> 只用于展示表格数据，不要用于页面排版。
为表格添加边框、间距、斑马纹等样式，推荐使用 CSS：
table, td, th {
border: 1px solid #ccc;
border-collapse: collapse; /* 合并边框 */
}
td {
padding: 8px 12px;
}
tr:nth-child(even) td {
background-color: #f9f9f9; /* 斑马纹 */
}
响应式表格中的 <td>
小屏幕下表格可能会溢出或难以阅读,常见的响应式方案有两种：
- 水平滚动：将表格包裹在可滚动的容器中。
- 将每行转为卡片：利用媒体查询，在小屏幕下将
<tr>改为块级元素，并用伪元素显示表头内容（配合data-label属性）。
示例（配合 CSS）：
<td data-label="姓名">张三</td>
@media (max-width: 600px) {
td {
display: block;
text-align: right;
}
td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
常见陷阱与最佳实践
- 不要遗漏闭合标签：虽然 HTML5 允许省略部分结束标签，但为了清晰和兼容，建议显式书写
</td>。 - 避免内嵌复杂元素：
<td>内可以包含任意流内容（文本、图片、链接、列表等），但不要嵌套整个表格（除非确实需要表格中的表格，极度不推荐）。 - 为空时：仍然保留
<td></td>或使用 ,否则可能影响边框渲染。 - 使用
scope和headers增强复杂表格的可访问性。
<td> 是 HTML 表格中最基本、最常用的元素，它简单直接，但用好它需要理解表格结构、合并规则、语义化以及现代 CSS 的配合，无论是统计报表、产品列表还是课程表，掌握 <td> 的正确用法，能让你的数据展示清晰、规范且易于维护。
下次当你需要在网页中展示结构化的数据时，不妨从 <table> 和 <td> 开始——它们是 Web 数据呈现的基石。
