编辑“︁HTML表格基础”︁

= HTML表格基础 =

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

== 基本结构 ==

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

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

=== 基础示例 ===
<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$1000</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$1500</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''

{| border="1"
|+ 
|-
! 月份 !! 销售额
|-
| 一月 || $1000
|-
| 二月 || $1500
|}

== 表格属性 ==

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

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

=== 属性示例 ===
<syntaxhighlight lang="html">
<table border="2" cellpadding="5" cellspacing="3" width="80%">
  <!-- 表格内容 -->
</table>
</syntaxhighlight>

== 高级结构 ==

=== 表格分组 ===
* '''<code><nowiki><thead></nowiki></code>'''：定义表头区域
* '''<code><nowiki><tbody></nowiki></code>'''：定义表格主体
* '''<code><nowiki><tfoot></nowiki></code>'''：定义表尾区域

<mermaid>
flowchart LR
    A[table] --> B[thead]
    A --> C[tbody]
    A --> D[tfoot]
    B --> E[tr]
    C --> F[tr]
    D --> G[tr]
</mermaid>

=== 列分组 ===
* '''<code><nowiki><colgroup></nowiki></code>'''：定义列组
* '''<code><nowiki><col></nowiki></code>'''：定义列属性

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

== 单元格合并 ==

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

=== 合并示例 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

'''输出效果：'''

{| border="1"
|+ 
|-
! colspan="2" | 姓名 !! 年龄
|-
| rowspan="2" | 张三 || 第一季度 || 25
|-
| 第二季度 || 25
|}

== 响应式表格 ==

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

<syntaxhighlight lang="css">
@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  td, th {
    display: block;
    width: 100%;
  }
}
</syntaxhighlight>

== 数学公式表格 ==

表格中可嵌入数学公式：

<math>
\begin{array}{|c|c|}
\hline
\text{运算} & \text{公式} \\
\hline
\text{加法} & a + b = c \\
\hline
\text{勾股定理} & a^2 + b^2 = c^2 \\
\hline
\end{array}
</math>

== 实际应用案例 ==

=== 课程表示例 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== 数据报表 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 最佳实践 ==

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== 常见问题 ==

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

'''Q: 如何创建斑马纹表格？'''<br/>
A: 使用CSS nth-child选择器：
<syntaxhighlight lang="css">
tr:nth-child(even) { background-color: #f2f2f2; }
</syntaxhighlight>

'''Q: 表格边框如何合并？'''<br/>
A: 使用CSS border-collapse属性：
<syntaxhighlight lang="css">
table { border-collapse: collapse; }
</syntaxhighlight>

== 总结 ==

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

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]