HTML表格基础结构教学

当我们谈论HTML表格的基本结构时，我们首先要有一个

这三个标签，

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>30</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
  </tr>
</table>

让我给你看一个例子，这样会更清楚：

<table>
  <caption>月度销售报告</caption>
  <thead>
    <tr>
      <th>月份</th>
      <th>产品A销售额</th>
      <th>产品B销售额</th>
      <th>总销售额</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>12000</td>
      <td>8000</td>
      <td>20000</td>
    </tr>
    <tr>
      <td>二月</td>
      <td>15000</td>
      <td>9500</td>
      <td>24500</td>
    </tr>
    <!-- 更多数据行 -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计</td>
      <td>44500</td>
    </tr>
  </tfoot>
</table>

你看，有了这些标签，表格的结构就变得非常清晰了。对于屏幕阅读器来说，它们能更好地理解哪些是标题，哪些是数据，哪些是汇总，从而提供更好的用户体验。

如何合并单元格以创建更复杂的表格布局？

有时候，我们的数据并不是那么规规矩矩的，可能需要某个单元格横跨多列，或者纵跨多行。这时候，colspan 和 rowspan 这两个属性就派上用场了，它们是用来合并单元格的。

• colspan 属性： 用于指定一个单元格应该横跨（占据）多少列。它的值是一个整数，表示该单元格要合并的列数。
• rowspan 属性： 用于指定一个单元格应该纵跨（占据）多少行。同样，它的值也是一个整数，表示该单元格要合并的行数。

使用这两个属性时，需要稍微计算一下，确保表格的整体结构不会因为合并而“错位”。我记得我刚开始用的时候，经常会因为少写一个

<table>
  <caption>学生成绩单</caption>
  <thead>
    <tr>
      <th rowspan="2">姓名</th>
      <th colspan="2">第一学期</th>
      <th colspan="2">第二学期</th>
    </tr>
    <tr>
      <th>数学</th>
      <th>语文</th>
      <th>数学</th>
      <th>语文</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
      <td>92</td>
      <td>88</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>78</td>
      <td>80</td>
      <td>85</td>
      <td>75</td>
    </tr>
  </tbody>
</table>