下面给你一份 完整、清晰、可直接学习/教学使用的《HTML5 表格语法格式详解》，包含结构讲解、所有常用标签、属性说明、合并单元格、样式、美化示例以及最佳实践。

HTML5 表格语法格式详解（Table 完整教程）

HTML 表格主要用于展示结构化数据，如订单列表、成绩单、日报等。

一、表格的基本结构

HTML 表格主要由 <table> 标签组成，内部包含：

  • <thead>：表头（可选）
  • <tbody>：表体（常用）
  • <tfoot>：表尾（可选）
  • <tr>：表格行
  • <th>：表头单元格（默认加粗居中）
  • <td>：普通数据单元格

1. 最基本表格

&lt;table border="1">
    &lt;tr>
        &lt;th>姓名&lt;/th>
        &lt;th>年龄&lt;/th>
        &lt;th>城市&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>张三&lt;/td>
        &lt;td>20&lt;/td>
        &lt;td>北京&lt;/td>
    &lt;/tr>
&lt;/table>

二、推荐结构（带 thead + tbody）

表格分区更易读，且利于 CSS 和 JS 控制。

&lt;table border="1">
    &lt;thead>
        &lt;tr>
            &lt;th>产品&lt;/th>
            &lt;th>价格&lt;/th>
            &lt;th>数量&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr>
            &lt;td>苹果&lt;/td>
            &lt;td>5&lt;/td>
            &lt;td>10&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>香蕉&lt;/td>
            &lt;td>3&lt;/td>
            &lt;td>8&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table>

三、表格相关标签详解

1. <table> 常见属性

属性说明
border="1"显示边框（现代 HTML/CSS 建议使用 CSS 实现）
cellpadding单元格内边距
cellspacing单元格之间的间距
width表格宽度
align对齐（已废弃）→ 请用 CSS

现代写法推荐使用 CSS：

table {
    border-collapse: collapse; /* 去除表格间距 */
    width: 100%;
}

2. <tr> 表示表格行

一个 <tr> 包含多个 <td> 或 <th>。

3. <th> 表头单元格

用途：

  • 表格头部
  • 默认 加粗 + 居中
&lt;th>姓名&lt;/th>

4. <td> 普通单元格

&lt;td>张三&lt;/td>

四、合并单元格（重点）

1. colspan（跨列）

把横向相邻单元格合并。

&lt;td colspan="2">合并两列&lt;/td>

2. rowspan（跨行）

把纵向相邻单元格合并。

&lt;td rowspan="3">合并三行&lt;/td>

五、完整示例：跨行 + 跨列

&lt;table border="1">
    &lt;tr>
        &lt;th rowspan="2">姓名&lt;/th>
        &lt;th colspan="2">成绩&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;th>数学&lt;/th>
        &lt;th>语文&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>张三&lt;/td>
        &lt;td>90&lt;/td>
        &lt;td>88&lt;/td>
    &lt;/tr>
&lt;/table>

六、表格美化（HTML5 + CSS3）

推荐使用 CSS 管理表格样式。

&lt;style>
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}
th, td {
    border: 1px solid #ccc;
    padding: 10px;
}
thead {
    background: #f5f5f5;
}
tbody tr:nth-child(odd) {
    background: #f9f9f9; /* 斑马线 */
}
tbody tr:hover {
    background: #ffe;
}
&lt;/style>

&lt;table>
    &lt;thead>
        &lt;tr>
            &lt;th>序号&lt;/th>
            &lt;th>员工&lt;/th>
            &lt;th>部门&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr>
            &lt;td>01&lt;/td>
            &lt;td>王强&lt;/td>
            &lt;td>研发部&lt;/td>
        &lt;/tr>
        &lt;tr>
            &lt;td>02&lt;/td>
            &lt;td>李丽&lt;/td>
            &lt;td>人事部&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table>

七、HTML5 新增表格属性（语义增强）

HTML5 本身对表格结构没有重大变化，但强调正确语义：

  • <caption> 用于表格标题
  • <colgroup> 和 <col> 定义列宽、列样式（更专业的表格）

示例：caption / colgroup

&lt;table>
    &lt;caption>2025年一季度销售统计&lt;/caption>
    &lt;colgroup>
        &lt;col style="width: 120px;">
        &lt;col style="width: 80px;">
        &lt;col style="width: 80px; background-color: #ffe;">
    &lt;/colgroup>

    &lt;tr>
        &lt;th>产品&lt;/th>
        &lt;th>销量&lt;/th>
        &lt;th>利润&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>苹果&lt;/td>
        &lt;td>1000&lt;/td>
        &lt;td>5000&lt;/td>
    &lt;/tr>
&lt;/table>

八、响应式表格设计（移动端必备）

表格在手机上会超出屏幕，可以用：

方案1：横向滚动

.table-wrapper {
    overflow-x: auto;
}


&lt;div class="table-wrapper">
    &lt;table>...&lt;/table>
&lt;/div>

方案2：卡片式表格（适合电商）

如需我可以提供完整代码。

九、最佳实践总结

✔ 使用 thead / tbody / tfoot 提升结构清晰度
✔ 尽量使用 CSS 而不是 HTML 的旧式属性
✔ 使用 border-collapse 美化表格
✔ 使用 nth-child 实现斑马线
✔ 合并单元格用 rowspan / colspan
✔ 复杂表格使用 colgroup