HTML表格基础[编辑 | 编辑源代码]

HTML表格（HTML Tables）是用于在网页上以行和列的形式展示结构化数据的核心元素。表格由单元格组成，可以包含文本、图像、链接甚至其他表格。本教程将详细介绍HTML表格的基本结构、常用标签及其属性。

基本结构[编辑 | 编辑源代码]

HTML表格由以下核心标签构成：

<table>：定义表格容器
<tr>（table row）：定义表格行
<td>（table data）：定义标准单元格
<th>（table header）：定义标题单元格（默认加粗居中）

基础示例[编辑 | 编辑源代码]

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

输出效果：


月份	销售额
一月	$1000
二月	$1500

表格属性[编辑 | 编辑源代码]

HTML5中推荐使用CSS替代传统属性，但了解这些属性仍有必要：

border：定义边框宽度（像素值）
cellpadding：单元格内容与边框的间距
cellspacing：单元格之间的间距
width/height：表格尺寸

属性示例[编辑 | 编辑源代码]

<table border="2" cellpadding="5" cellspacing="3" width="80%">
  <!-- 表格内容 -->
</table>

高级结构[编辑 | 编辑源代码]

表格分组[编辑 | 编辑源代码]

<thead>：定义表头区域
<tbody>：定义表格主体
<tfoot>：定义表尾区域

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

<colgroup>：定义列组
<col>：定义列属性

<table>
  <colgroup>
    <col span="2" style="background-color:lightgray">
    <col style="background-color:yellow">
  </colgroup>
  <!-- 表格内容 -->
</table>

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

colspan：水平合并单元格
rowspan：垂直合并单元格

合并示例[编辑 | 编辑源代码]

<table border="1">
  <tr>
    <th colspan="2">姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td rowspan="2">张三</td>
    <td>第一季度</td>
    <td>25</td>
  </tr>
  <tr>
    <td>第二季度</td>
    <td>25</td>
  </tr>
</table>

输出效果：


姓名		年龄
张三	第一季度	25
张三	第二季度	25

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

对于移动设备，可通过CSS实现响应式表格：

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  td, th {
    display: block;
    width: 100%;
  }
}

数学公式表格[编辑 | 编辑源代码]

表格中可嵌入数学公式：

$\begin{array}{cc} 运算 & 公式 \\ 加法 & a + b = c \\ 勾股定理 & a^{2} + b^{2} = c^{2} \end{array}$

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

课程表示例[编辑 | 编辑源代码]

<table>
  <caption>2023秋季课程表</caption>
  <thead>
    <tr>
      <th>时间</th>
      <th>周一</th>
      <th>周二</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>9:00-10:30</td>
      <td>数学</td>
      <td>物理</td>
    </tr>
    <tr>
      <td>10:45-12:15</td>
      <td>英语</td>
      <td>化学</td>
    </tr>
  </tbody>
</table>

数据报表[编辑 | 编辑源代码]

<table class="financial-report">
  <tr>
    <th>季度</th>
    <th>收入</th>
    <th>支出</th>
    <th>利润</th>
  </tr>
  <tr>
    <td>Q1</td>
    <td>$120,000</td>
    <td>$80,000</td>
    <td>$40,000</td>
  </tr>
  <!-- 更多数据行 -->
</table>

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

1. 使用语义化标签（thead/tbody/tfoot） 2. 为复杂表格添加<caption>说明 3. 通过CSS控制样式而非HTML属性 4. 确保表格有适当的标题和描述 5. 考虑可访问性（使用scope属性）

<table>
  <caption>员工信息表</caption>
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">姓名</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">001</th>
      <td>王小明</td>
    </tr>
  </tbody>
</table>

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

Q: 表格布局和div布局哪个更好？
A: 表格应仅用于展示表格数据，页面布局应使用CSS。

Q: 如何创建斑马纹表格？
A: 使用CSS nth-child选择器：

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

Q: 表格边框如何合并？
A: 使用CSS border-collapse属性：

table { border-collapse: collapse; }

总结[编辑 | 编辑源代码]

HTML表格是展示结构化数据的强大工具。通过掌握基本标签、合并单元格技术以及现代CSS样式方法，可以创建既美观又功能完善的表格。记住始终考虑语义化和可访问性，特别是在处理复杂数据展示时。