核心三组件

<table>
  <tr>                  <!-- 表格行 (Table Row) -->
    <td>姓名</td>       <!-- 单元格 (Table Data) -->
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>28</td>
  </tr>
</table>

表格的四大优势

1. 结构性：行列分明，适合财务数据等规整内容
2. 兼容性：从IE6到最新Chrome都完美支持
3. 可访问性：屏幕阅读器可清晰解析表格内容
4. 可扩展性：可通过CSS实现斑马纹、悬停高亮等效果

基础增强技巧

1. 添加表头单元格 <th>

<table>
  <tr>
    <th>项目</th>      <!-- 自动加粗居中 -->
    <th>价格</th>
  </tr>
  <tr>
    <td>咖啡</td>
    <td>25</td>
  </tr>
</table>

2. 合并单元格

<td colspan="2">横跨两列</td>  <!-- 横向合并 -->
<td rowspan="2">纵跨两行</td> <!-- 纵向合并 -->

3. 基础样式优化

table {
  border-collapse: collapse; /* 消除默认单元格间距 */
  width: 100%;              /* 表格自适应 */
}
td, th {
  border: 1px solid #ddd;   /* 添加细边框 */
  padding: 8px;             /* 内边距 */
}

新手雷区

1. 用表格做页面布局 → 1990年代的复古做法
2. 忘记闭合</tr>标签 → 导致单元格"越狱"
3. 嵌套多层表格 → 性能杀手

经典应用场景

• 电商产品参数对比
• 学生成绩单展示
• 日历/日程表布局
• 任何需要行列对齐的数据

实战备忘录

<!-- 带标题的完整表格结构 -->
<table>
  <caption>2023销售报表</caption>  <!-- 表格标题 -->
  <thead>                         <!-- 表头区 -->
    <tr><th>月份</th><th>销售额</th></tr>
  </thead>
  <tbody>                         <!-- 数据区 -->
    <tr><td>1月</td><td>¥120万</td></tr>
  </tbody>
  <tfoot>                         <!-- 表尾区 -->
    <tr><td>总计</td><td>¥980万</td></tr>
  </tfoot>
</table>

记住：表格就像Excel的网页版，用<tr>画行，用<td>填格，当数据需要"横平竖直"时，它就是你的最佳拍档！就像程序员用表格对齐代码——虽然最后总会变成抽象艺术。