<td>-表格数据单元格

<td> 标签基础

<td> 是 HTML 表格中的核心元素，用于定义表格的数据单元格（table data）。它必须嵌套在 <tr>（表格行）标签内，与 <th>（表头单元格）共同构成表格内容的基本结构。一个典型的表格由多个 <td> 单元格组成，每个单元格代表行列交叉点上的数据。

<table border="1">
  <tr>
    <td>苹果</td>
    <td>红色</td>
    <td>5kg</td>
  </tr>
</table>

核心属性详解

colspan 与 rowspan

这两个属性控制单元格的跨列/跨行合并：

• colspan="2" 使单元格横向合并两列
• rowspan="3" 使单元格纵向合并三行

<table border="1">
  <tr>
    <td colspan="2">合并两列</td>
    <td>正常单元格</td>
  </tr>
  <tr>
    <td rowspan="2">合并两行</td>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

headers 属性

用于关联表头单元格，提升可访问性。值为对应 <th> 的 id：

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

其他重要属性

• scope：仅在 <th> 中有效，但常与 <td> 配合使用
• abbr：为单元格内容提供缩写版本
• align（已废弃）：建议改用 CSS 的 text-align
• valign（已废弃）：建议改用 CSS 的 vertical-align

样式控制实践

基础样式示例

通过 CSS 控制单元格外观：

td {
  padding: 12px 15px;
  border-bottom: 1px solid #e0e0e0;
  transition: background 0.3s;
}

td:hover {
  background-color: #f5f5f5;
}

响应式表格处理

在小屏幕下让单元格堆叠显示：

@media (max-width: 600px) {
  td {
    display: block;
    border: none;
    position: relative;
    padding-left: 50%;
  }
  
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

动态内容处理

JavaScript 交互示例

通过 DOM 操作修改单元格内容：

// 获取第二个tr的第一个td
const cell = document.querySelector('tr:nth-child(2) td:first-child');

// 修改内容
cell.textContent = '更新值';

// 添加CSS类
cell.classList.add('highlight');

// 动态计算并显示数据
const priceCells = document.querySelectorAll('.price');
priceCells.forEach(cell => {
  const quantity = cell.previousElementSibling.textContent;
  cell.textContent = quantity * 10 + '元';
});

高级应用场景

嵌套表格结构

在单元格内嵌入次级表格：

<table>
  <tr>
    <td>
      主要数据
      <table style="width:100%">
        <tr>
          <td>子表格A</td>
          <td>子表格B</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

结合表单元素

创建可编辑的表格单元格：

<table>
  <tr>
    <td contenteditable="true">可直接编辑</td>
    <td>
      <input type="text" value="表单输入">
    </td>
  </tr>
</table>

性能优化要点

1. 避免过度嵌套：表格层级过深会降低渲染性能
2. 使用 scope 属性：明确单元格关联关系
3. 虚拟滚动技术：大数据量时只渲染可视区域单元格
4. CSS 选择器优化：避免使用复杂选择器匹配单元格

// 虚拟滚动示例
const table = document.getElementById('large-table');
table.addEventListener('scroll', function() {
  const visibleRows = Math.ceil(table.clientHeight / rowHeight);
  // 仅渲染可见行的单元格
});

可访问性最佳实践

1. 始终为数据表格添加 <caption>
2. 复杂表格使用 headers 和 id 建立关联
3. 确保单元格有足够的颜色对比度
4. 为图标按钮等非文本内容提供 ARIA 标签

<table>
  <caption>月度销售数据</caption>
  <tr>
    <th id="month">月份</th>
    <th id="sales">销售额</th>
  </tr>
  <tr>
    <td headers="month">一月</td>
    <td headers="sales" aria-label="一月份销售额">¥15,000</td>
  </tr>
</table>

现代 CSS 技术应用

使用 CSS Grid 增强布局

table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

tr {
  display: contents;
}

td {
  grid-column: span 1;
  /* 特殊单元格跨列 */
  &.wide {
    grid-column: span 2;
  }
}

粘性表头实现

thead th {
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 2px 2px -1px rgba(0,0,0,0.4);
}

常见问题解决方案

文本溢出处理

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

斑马纹表格实现

tr:nth-child(even) td {
  background-color: #f9f9f9;
}

单元格边框合并问题

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ddd;
}

浏览器兼容性备忘

1. 所有现代浏览器完全支持 <td>
2. 部分旧版 IE 对 colspan/rowspan 的实现有差异
3. 移动端浏览器对固定宽度表格的处理可能不同
4. 打印样式需要特殊考虑：

@media print {
  td {
    background-color: transparent !important;
    page-break-inside: avoid;
  }
}