<td>-表格数据单元格

<td> 是 HTML 表格中的核心标签之一，用于定义表格的数据单元格。它通常嵌套在 <tr>（表格行）标签内，与 <th>（表头单元格）共同构建表格的结构。

<td> 的基本语法

<td> 是一个双标签，其基本语法如下：

<table>
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

每个 <td> 代表表格中的一个数据单元格，默认情况下，单元格内容左对齐，表头单元格（<th>）内容居中对齐且加粗。

<td> 的常用属性

虽然现代 HTML 推荐使用 CSS 替代部分属性，但某些场景下仍会用到以下原生属性：

1. colspan：横向合并单元格，指定单元格跨越的列数。

   <table border="1">
     <tr>
       <td colspan="2">合并两列</td>
     </tr>
     <tr>
       <td>第一列</td>
       <td>第二列</td>
     </tr>
   </table>
   

   效果：
   | 合并两列（占两列宽度） |
   |-----------|-----------|
   | 第一列 | 第二列 |

2. rowspan：纵向合并单元格，指定单元格跨越的行数。

   <table border="1">
     <tr>
       <td rowspan="2">合并两行</td>
       <td>第一行</td>
     </tr>
     <tr>
       <td>第二行</td>
     </tr>
   </table>
   

   效果：

   合并两行（占两行高度）	第一行
   	第二行

3. headers：关联表头单元格（<th>）的 id，用于辅助技术（如屏幕阅读器）。

   <table>
     <tr>
       <th id="name">姓名</th>
       <th id="age">年龄</th>
     </tr>
     <tr>
       <td headers="name">张三</td>
       <td headers="age">25</td>
     </tr>
   </table>
   

4. align（已废弃）：内容水平对齐方式（left/center/right），建议用 CSS 的 text-align 替代。

5. valign（已废弃）：内容垂直对齐方式（top/middle/bottom），建议用 CSS 的 vertical-align 替代。

<td> 与 <th> 的区别

• <th> 用于表头，默认加粗并居中对齐。
• <td> 用于普通数据单元格，默认左对齐。
• <th> 通常包含 scope 属性（如 scope="col" 或 scope="row"）以明确关联的行或列。

示例：

<table border="1">
  <tr>
    <th scope="col">姓名</th>
    <th scope="col">年龄</th>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

通过 CSS 控制 <td> 样式

现代开发中，样式应通过 CSS 实现。例如：

<style>
  td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  td.highlight {
    background-color: yellow;
  }
</style>

<table>
  <tr>
    <td>普通单元格</td>
    <td class="highlight">高亮单元格</td>
  </tr>
</table>

动态操作 <td>（JavaScript 示例）

通过 JavaScript 可以动态修改 <td> 内容或样式：

<table id="demo">
  <tr>
    <td>原始内容</td>
  </tr>
</table>

<script>
  const td = document.querySelector('#demo td');
  td.textContent = '修改后的内容';
  td.style.color = 'red';
</script>

实际应用场景

1. 数据展示表格：

   <table>
     <tr>
       <th>产品</th>
       <th>价格</th>
     </tr>
     <tr>
       <td>手机</td>
       <td>¥1999</td>
     </tr>
   </table>
   

2. 合并复杂表头：

   <table border="1">
     <tr>
       <th colspan="2">学生信息</th>
     </tr>
     <tr>
       <th>姓名</th>
       <th>学号</th>
     </tr>
     <tr>
       <td>王五</td>
       <td>2023001</td>
     </tr>
   </table>
   

注意事项

• 避免嵌套 <div> 或其他块级元素在 <td> 内（可能导致渲染问题）。
• 优先使用 CSS 而非 HTML 属性控制样式。
• 确保表格具有清晰的语义结构（如使用 <thead>、<tbody>）。

与其他标签的协作

<td> 通常与以下标签配合使用：

• <table>：定义表格容器。
• <tr>：定义表格行。
• <th>：定义表头单元格。
• <caption>：添加表格标题。

示例：

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>分数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>赵六</td>
      <td>95</td>
    </tr>
  </tbody>
</table>

响应式表格中的 <td>

在小屏幕设备中，可通过 CSS 将表格转换为更友好的布局：

@media (max-width: 600px) {
  table, thead, tbody, tr, td {
    display: block;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    width: 80px;
  }
}

对应的 HTML：

<table>
  <tr>
    <td data-label="姓名">钱七</td>
    <td data-label="城市">北京</td>
  </tr>
</table>

无障碍优化

为 <td> 添加 aria-label 或关联 <th> 的 id 以提升可访问性：

<table>
  <tr>
    <th id="product">产品</th>
  </tr>
  <tr>
    <td aria-labelledby="product">笔记本电脑</td>
  </tr>
</table>