HTML表格结构[编辑 | 编辑源代码]

HTML表格结构是网页中用于以行和列的形式组织数据的核心元素，广泛应用于数据展示、布局设计等场景。本节将详细介绍表格的基本语法、结构标签、属性及实际应用。

基本概念[编辑 | 编辑源代码]

HTML表格由<table>标签定义，包含若干行（<tr>），每行又包含若干单元格（<td>或<th>）。表格通过二维结构实现数据的逻辑分组。

核心组件[编辑 | 编辑源代码]

基础语法[编辑 | 编辑源代码]

以下是简单表格的代码示例：

<table border="1">
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$1000</td>
  </tr>
</table>

输出效果：

月份	销售额
一月	$1000

结构化元素[编辑 | 编辑源代码]

表头/主体/页脚[编辑 | 编辑源代码]

使用语义化标签增强可访问性：

<table>
  <thead>
    <tr><th>项目</th><th>数量</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML书籍</td><td>3</td></tr>
  </tbody>
  <tfoot>
    <tr><td>总计</td><td>3</td></tr>
  </tfoot>
</table>

列分组[编辑 | 编辑源代码]

通过<colgroup>控制列样式：

<table>
  <colgroup span="2" style="background:#eee"></colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

高级特性[编辑 | 编辑源代码]

单元格合并[编辑 | 编辑源代码]

使用colspan和rowspan属性：

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td colspan="2">B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

合并逻辑： ${\begin{cases} colspan = n & 水平合并n列 \\ rowspan = m & 垂直合并m行 \end{cases}$

响应式表格[编辑 | 编辑源代码]

通过CSS实现滚动容器：

<div style="overflow-x:auto;">
  <table>...</table>
</div>

实际应用案例[编辑 | 编辑源代码]

商品价格表[编辑 | 编辑源代码]

<table>
  <caption>电子产品价格表</caption>
  <thead>
    <tr>
      <th scope="col">产品</th>
      <th scope="col">规格</th>
      <th scope="col">价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">笔记本</th>
      <td>i7/16GB</td>
      <td>$899</td>
    </tr>
  </tbody>
</table>

课程时间表[编辑 | 编辑源代码]

<table>
  <tr>
    <th>时间</th>
    <th>周一</th>
    <th>周二</th>
  </tr>
  <tr>
    <td>9:00</td>
    <td rowspan="2">HTML</td>
    <td>CSS</td>
  </tr>
  <tr>
    <td>10:00</td>
    <td>JavaScript</td>
  </tr>
</table>

最佳实践[编辑 | 编辑源代码]

1. 始终使用<th>表示标题单元格 2. 为复杂表格添加scope属性 3. 通过<caption>添加表格描述 4. 避免使用表格进行页面布局 5. 移动端优先考虑响应式设计

常见问题[编辑 | 编辑源代码]

Q: 如何实现斑马纹效果？

tr:nth-child(even) {background: #f2f2f2}

Q: 表格边框如何合并？

table {border-collapse: collapse}