【技术专题】HTML5 网页技术 - HTML5 表格标签

大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

HTML5（在第二阶段目录里）

HTML5 表格标签

HTML5 表格主要用于展示二维表格数据 。核心结构是：table 包住整个表格，tr 表示一行，th/td 表示单元格；caption、thead、tbody 用来增强语义和分组。

1. 常用标签

标签	作用
<table>	表格容器，所有表格内容放在里面
<caption>	表格标题，必须是 <table> 的第一个子元素，一个表格通常只有一个
<thead>	表头区域，通常放列标题，一个表格最多一个
<tbody>	表格主体区域，可有一个或多个，用于分组数据行
<tfoot>	表尾区域，可选，常放汇总行
<tr>	表格行，里面放 th 或 td
<th>	表头单元格，语义是标题，默认加粗、居中
<td>	普通数据单元格，默认左对齐

推荐结构顺序：

<table>
  <caption>表格标题</caption>
  <thead>...</thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

注意：<tr> 可以直接写在 <table> 里，但浏览器通常会自动把它包进 <tbody>。推荐显式写 thead、tbody。

2. 基本示例

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">科目</th>
      <th scope="col">成绩</th>
      <th scope="col">备注</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>数学</td>
      <td>90</td>
      <td>优秀</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>语文</td>
      <td>88</td>
      <td>良好</td>
    </tr>
  </tbody>
</table>

• <caption>：整个表格的标题。
• <thead>：表头，通常放 <th>。
• <tbody>：主体数据，通常放 <td>。
• <th scope="col">：表示这是"列"的表头，有利于无障碍阅读。
• <th scope="row">：表示这是"行"的表头。

3. 合并列：colspan

colspan 用于向右合并列 ，写在 <td> 或 <th> 上。

<tr>
  <td colspan="2">综合成绩</td>
  <td>优秀</td>
</tr>

表示这个单元格横向占 2 列。

4. 合并行：rowspan

rowspan 用于向下合并行 ，也写在 <td> 或 <th> 上。

<tr>
  <td rowspan="2">张三</td>
  <td>数学</td>
  <td>90</td>
</tr>
<tr>
  <td>语文</td>
  <td>88</td>
</tr>

表示"张三"这个单元格向下跨 2 行，所以第二行不需要再写"张三"。

5. 合并行列完整示例

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #999;
    padding: 8px;
    text-align: center;
  }
  caption {
    font-weight: bold;
    margin-bottom: 8px;
  }
</style>

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">科目</th>
      <th scope="col">成绩</th>
      <th scope="col">备注</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">张三</td>
      <td>数学</td>
      <td>90</td>
      <td rowspan="2">优秀</td>
    </tr>
    <tr>
      <td>语文</td>
      <td>88</td>
    </tr>
    <tr>
      <td>李四</td>
      <td colspan="2">综合</td>
      <td>良好</td>
    </tr>
  </tbody>
</table>

这个例子里：

• 张三 使用 rowspan="2"，向下合并两行。
• 优秀 使用 rowspan="2"，也向下合并两行。
• 综合 使用 colspan="2"，向右合并两列。
• 合并后，被合并的位置不要再写多余的 td，否则表格列数会错乱。