编辑“︁HTML表格结构”︁（章节）

= HTML表格结构 =

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

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

=== 核心组件 ===
<mermaid>
flowchart LR
    A[table] --> B[thead]
    A --> C[tbody]
    A --> D[tfoot]
    B --> E[tr]
    C --> F[tr]
    D --> G[tr]
    E & F & G --> H[td/th]
</mermaid>

== 基础语法 ==
以下是简单表格的代码示例：

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

'''输出效果：'''
{| border="1"
|-
! 月份 !! 销售额
|-
| 一月 || $1000
|}

== 结构化元素 ==
=== 表头/主体/页脚 ===
使用语义化标签增强可访问性：
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== 列分组 ===
通过<code><nowiki><colgroup></nowiki></code>控制列样式：
<syntaxhighlight lang="html">
<table>
  <colgroup span="2" style="background:#eee"></colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>
</syntaxhighlight>

== 高级特性 ==
=== 单元格合并 ===
使用<code>colspan</code>和<code>rowspan</code>属性：
<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td colspan="2">B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>
</syntaxhighlight>

'''合并逻辑：'''
<math>
\begin{cases}
\text{colspan}=n & \text{水平合并n列}\\
\text{rowspan}=m & \text{垂直合并m行}
\end{cases}
</math>

=== 响应式表格 ===
通过CSS实现滚动容器：
<syntaxhighlight lang="html">
<div style="overflow-x:auto;">
  <table>...</table>
</div>
</syntaxhighlight>

== 实际应用案例 ==
=== 商品价格表 ===
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

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

== 常见问题 ==
'''Q: 如何实现斑马纹效果？'''
<syntaxhighlight lang="css">
tr:nth-child(even) {background: #f2f2f2}
</syntaxhighlight>

'''Q: 表格边框如何合并？'''
<syntaxhighlight lang="css">
table {border-collapse: collapse}
</syntaxhighlight>

== 相关技术 ==
* [[HTML5]]语义化表格
* [[CSS]]表格样式控制
* [[ARIA]]无障碍增强

通过掌握这些表格结构技术，您可以创建出既美观又功能完善的数据展示界面。建议结合CSS进一步学习表格的视觉呈现技巧。

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