编辑“︁HTML表格边框”︁（章节）

= HTML表格边框 =

== 介绍 ==
HTML表格边框（'''Table Borders'''）是指通过HTML属性或CSS样式为表格（'''<table>'''）及其单元格（'''<td>'''、'''<th>'''）添加可见的边界线。边框不仅用于美化表格，还能提升数据的可读性，使表格结构更清晰。本教程将详细介绍如何通过HTML原生属性和CSS两种方式控制表格边框样式。

== HTML原生边框属性 ==
HTML提供了'''border'''属性直接为表格添加边框，但功能有限，通常仅用于快速原型设计。

=== 基本语法 ===
<syntaxhighlight lang="html">
<table border="1">
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据A</td>
    <td>数据B</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''
{| border="1"
|-
! 标题1 !! 标题2
|-
| 数据A || 数据B
|}

'''注意：'''  
* '''border="1"''' 会为表格和所有单元格添加1像素宽的黑色边框。
* 值必须是数字（如2、3），但无法自定义颜色或样式。

== CSS边框控制 ==
CSS提供了更精细的边框控制，推荐在实际开发中使用。

=== 基础CSS边框 ===
<syntaxhighlight lang="html">
<style>
  table {
    border: 2px solid #3498db;
    border-collapse: collapse; /* 合并相邻边框 */
  }
  th, td {
    border: 1px solid #e74c3c;
    padding: 8px;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
</table>
</syntaxhighlight>

'''输出效果：'''
{| style="border: 2px solid #3498db; border-collapse: collapse;"
|-
! style="border: 1px solid #e74c3c; padding: 8px;" | 姓名
! style="border: 1px solid #e74c3c; padding: 8px;" | 年龄
|-
| style="border: 1px solid #e74c3c; padding: 8px;" | 张三
| style="border: 1px solid #e74c3c; padding: 8px;" | 25
|}

'''关键属性说明：'''
* '''border-collapse'''：控制相邻单元格边框是否合并（可选值：<code>collapse</code>、<code>separate</code>）。
* '''border-style'''：支持<code>solid</code>、<code>dashed</code>、<code>dotted</code>等样式。

=== 高级边框样式 ===
通过CSS可实现复杂效果，如斑马纹表格：
<syntaxhighlight lang="html">
<style>
  table {
    border: 3px double #2c3e50;
    border-collapse: separate;
    border-spacing: 5px; /* 单元格间距 */
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  td {
    border: 1px dashed #7f8c8d;
  }
</style>
</syntaxhighlight>

== 边框模型对比 ==
<mermaid>
graph LR
  A[HTML border属性] -->|简单快速| B[固定样式]
  C[CSS边框] -->|完全控制| D[颜色/样式/宽度]
  C --> E[响应式设计]
</mermaid>

== 数学公式示例 ==
当计算边框总宽度时（假设边框不合并）：
<math>
\text{总宽度} = \text{表格边框} \times 2 + \sum (\text{单元格边框} \times 2)
</math>

== 实际应用案例 ==
'''场景：''' 商品价格对比表需要突出显示边框。
<syntaxhighlight lang="html">
<style>
  .price-table {
    border: 2px groove #27ae60;
    border-radius: 10px; /* 圆角边框 */
  }
  .price-table th {
    border-bottom: 3px ridge #e67e22;
  }
</style>
</syntaxhighlight>

== 常见问题 ==
'''Q：为什么我的边框显示不全？'''  
A：检查是否遗漏<code>border-collapse: collapse</code>或单元格的<code>border</code>定义。

'''Q：如何只显示外边框？'''  
A：设置表格边框后，将单元格边框设为<code>border: none</code>。

== 总结 ==
* HTML的'''border'''属性适合快速测试，但缺乏灵活性。
* CSS提供了完整的边框控制体系，包括颜色、样式、圆角等。
* 实际开发中优先使用CSS，并结合<code>border-collapse</code>优化显示效果。

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