Web前端：table标签的用法与属性

一、基础表格结构

一个完整的表格由以下标签构成：

<table>
  <caption>表格标题（可选）</caption>
  
  <!-- 表头 -->
  <thead>
    <tr> <!-- 表头行 -->
      <th>姓名</th> <!-- 表头单元格 -->
      <th>年龄</th>
    </tr>
  </thead>
  
  <!-- 表体 -->
  <tbody>
    <tr> <!-- 数据行 -->
      <td>张三</td> <!-- 数据单元格 -->
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
  
  <!-- 表尾（可选） -->
  <tfoot>
    <tr>
      <td>总计</td>
      <td>2人</td>
    </tr>
  </tfoot>
</table>

二、核心标签详解

1. <table>
   表格容器，所有表格内容必须放在其中。

2. <tr> (Table Row)
   定义表格中的一行。

3. <td> (Table Data)
   定义标准单元格，用于存放数据。
   常用属性：

   • colspan="2"：横向合并2个单元格

   • rowspan="2"：纵向合并2个单元格

4. <th> (Table Header)
   定义表头单元格（自动加粗居中）。
   属性同 <td>，额外支持：

   • scope="col"：声明是列标题

   • scope="row"：声明是行标题

5. 结构化标签：

   • <thead>：表头区域（可包含多个<tr>）

   • <tbody>：表体区域（可包含多个<tr>）

   • <tfoot>：表尾区域（位置在<tbody>前，但显示在底部）

   • <caption>：表格标题（必须是<table>的第一个子元素）

三、表格常用属性（HTML5 兼容） 

四、合并单元格实战

<table>
  <tr>
    <th colspan="2">个人信息</th> <!-- 合并2列 -->
  </tr>
  <tr>
    <td rowspan="2">张三</td> <!-- 合并2行 -->
    <td>25岁</td>
  </tr>
  <tr>
    <td>前端工程师</td>
  </tr>
</table>

渲染效果：

|--------个人信息--------|
| 张三   |   25岁       |
|        |--------------|
|        | 前端工程师   |

五、专业技巧 & 最佳实践

1.用 CSS 替代传统属性：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; 
  margin: 20px auto;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px; /* 替代cellpadding */
  text-align: left;
}

2.响应式表格方案：

@media (max-width: 600px) {
  table, thead, tbody, td, th, tr {
    display: block;
  }
  td::before {
    content: attr(data-label); /* 使用data-label属性显示列名 */
    font-weight: bold;
  }
}

HTML 配合：

<td data-label="姓名">张三</td>

3.增强可访问性：

• 为 <th> 添加 scope 属性：

<th scope="col">年龄</th> <!-- 列标题 -->
<th scope="row">张三</th> <!-- 行标题 -->

• 使用 <caption> 描述表格用途

4. 斑马纹效果：

tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

六、常见误区

1. 避免用表格布局页面
   （这是20年前的用法，现在用Flexbox/Grid）

2. 不要嵌套多层表格
   （会导致性能问题和代码混乱）

3. 表尾 <tfoot> 的位置
   （写在 <tbody> 前，浏览器会将其渲染在底部）

七、现代替代方案

对于复杂交互表格，推荐使用：

• CSS Grid：二维布局系统

• 组件库：如 Ant Design / Material UI 的表格组件

• 专用库：如 Tabulator 或 Handsontable

总结

表格的核心价值是清晰展示结构化数据。关键记住：

1. 使用语义化标签（thead/tbody/tfoot）

2. 用 CSS 控制样式（特别是边框合并）

3. 合并单元格用 colspan/rowspan

4. 始终考虑可访问性（scope/caption）