跳到主要内容

HTML 表格

表格是用于展示二维数据的重要 HTML 元素。本章将详细介绍 HTML 表格的创建、结构化和无障碍访问。

什么是表格？​

HTML 表格是一种用于展示表格数据的结构，即由行和列交叉组成的二维数据表。表格适合展示：

  • 数据列表（如成绩单、销售报表）
  • 日程表
  • 日历
  • 比较表格
重要提醒

不要使用表格进行网页布局！ 过去常用表格来创建页面布局，但这违反了现代网页设计的最佳实践。应该使用 CSS 布局（Flexbox 或 Grid）来创建页面结构。

基础表格结构​

基本标签​

一个完整的 HTML 表格由以下标签组成：

标签说明
<table>表格容器
<tr>行（Table Row）
<th>表头单元格（Table Header）
<td>数据单元格（Table Data）

简单示例​

<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>北京</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>上海</td>
    </tr>
</table>

提示：在浏览器中渲染后，表格会显示为带边框的行和列结构。

表格高级结构​

表格标题 <caption>​

<caption> 标签为表格提供标题，应该紧跟在 <table> 标签之后。

<table>
    <caption>2024年销售报表</caption>
    <tr>
        <th>季度</th>
        <th>销售额</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>¥100,000</td>
    </tr>
</table>

表头、表体、表脚​

为了更好地组织表格结构，使用 <thead>、<tbody> 和 <tfoot> 将表格分为三个部分：

<table>
    <caption>课程成绩单</caption>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>92</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>85</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">平均分</td>
            <td>88.5</td>
        </tr>
    </tfoot>
</table>

提示：浏览器会自动处理表格结构的渲染。

列分组 <col> 和 <colgroup>​

使用 <colgroup> 和 <col> 可以为表格的列定义属性：

<table>
    <colgroup>
        <col style="background-color: #f0f0f0;">
        <col span="2" style="background-color: #e0e0e0;">
    </colgroup>
    <tr>
        <th>姓名</th>
        <th>数学</th>
        <th>语文</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>88</td>
    </tr>
</table>

合并单元格​

跨列合并 colspan​

使用 colspan 属性可以让一个单元格横跨多列：

<table>
    <tr>
        <th colspan="2">合并单元格</th>
        <td>第三列</td>
    </tr>
    <tr>
        <td>第一列</td>
        <td>第二列</td>
        <td>第三列</td>
    </tr>
</table>

跨行合并 rowspan​

使用 rowspan 属性可以让一个单元格竖跨多行：

<table>
    <tr>
        <th rowspan="2">组别</th>
        <td>成员1</td>
    </tr>
    <tr>
        <td>成员2</td>
    </tr>
</table>

无障碍访问​

使用 scope 属性​

scope 属性告诉屏幕阅读器表头单元格是列标题还是行标题：

<table>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
    </tr>
    <tr>
        <th scope="row">张三</th>
        <td>25</td>
    </tr>
    <tr>
        <th scope="row">李四</th>
        <td>30</td>
    </tr>
</table>

scope 属性值：

值说明
col表头单元格用于其所属的列
row表头单元格用于其所在的行
colgroup表头单元格用于其所属的列组
rowgroup表头单元格用于其所在的行组

复杂表格的关联​

对于复杂表格，可以使用 id 和 headers 属性建立单元格与表头的关联：

<table>
    <thead>
        <tr>
            <th id="name">姓名</th>
            <th id="math">数学</th>
            <th id="chinese">语文</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="zhang">张三</th>
            <td headers="zhang math">92</td>
            <td headers="zhang chinese">88</td>
        </tr>
    </tbody>
</table>

表格样式美化​

基础样式​

table {
    border-collapse: collapse;  /* 合并边框 */
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

th {
    background-color: #f5f5f5;
    font-weight: bold;
}

斑马纹表格​

tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

悬停效果​

tbody tr:hover {
    background-color: #e8f4fc;
}

响应式表格​

.table-container {
    overflow-x: auto;
}
<div class="table-container">
    <table>
        <!-- 表格内容 -->
    </table>
</div>

完整示例​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程表</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #3498db;
            color: white;
        }
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tbody tr:hover {
            background-color: #e8f4fc;
        }
        .time-col {
            background-color: #ecf0f1;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <table>
        <caption>2024年春季课程表</caption>
        <thead>
            <tr>
                <th scope="col">时间</th>
                <th scope="col">周一</th>
                <th scope="col">周二</th>
                <th scope="col">周三</th>
                <th scope="col">周四</th>
                <th scope="col">周五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" class="time-col">8:00-10:00</th>
                <td>高等数学</td>
                <td>大学英语</td>
                <td>高等数学</td>
                <td>大学英语</td>
                <td>体育</td>
            </tr>
            <tr>
                <th scope="row" class="time-col">10:00-12:00</th>
                <td>计算机基础</td>
                <td>线性代数</td>
                <td>计算机基础</td>
                <td>线性代数</td>
                <td>选修课</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

小结​

本章学习了：

  1. 基础表格结构：<table>、<tr>、<th>、<td>
  2. 高级结构：<caption>、<thead>、<tbody>、<tfoot>、<colgroup>
  3. 合并单元格：colspan 和 rowspan 属性
  4. 无障碍访问：使用 scope 属性
  5. 样式美化：边框合并、斑马纹、悬停效果

练习​

  1. 创建一个包含3列5行的简单表格
  2. 使用 <caption> 添加表格标题
  3. 将第一行设为表头，并使用 scope="col"
  4. 使用 colspan 合并单元格
  5. 添加 CSS 样式实现斑马纹效果