HTML表格

创建结构化的数据表格

全站首页 频道首页

HTML表格基础

HTML表格用于展示结构化的数据。表格由行和列组成，包含表头、表体和表尾等部分。

提示： 表格应该仅用于展示表格数据，不应该用于页面布局。使用CSS进行页面布局。

基本表格结构

基本表格 
<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>
姓名 年龄 城市
张三 25 北京
李四 30 上海

W3C表格规范

根据W3C HTML5.3规范，表格应遵循以下原则：

  • 表格应使用<table>元素定义
  • 使用<caption>提供表格标题
  • 使用<thead>, <tbody>, <tfoot>进行语义分组
  • 表头单元格应使用<th>而非<td>
  • 使用scope属性明确表头与数据单元格的关系

表格元素

元素 描述 用途
<table> 定义表格 表格容器
<tr> 表格行 定义表格中的行
<td> 表格数据单元格 包含表格数据
<th> 表格标题单元格 定义表头，通常加粗居中
<thead> 表格头部 分组表头内容
<tbody> 表格主体 分组表格主体内容
<tfoot> 表格尾部 分组表格尾部内容
<caption> 表格标题 定义表格标题
<colgroup> 列分组 对列进行分组
<col> 列 定义列的属性

W3C表格元素规范

根据W3C HTML Living Standard，表格元素应遵循以下规则：

  • <table>元素不能嵌套在<p>元素内
  • <caption>必须是<table>的第一个子元素
  • <thead>, <tfoot>和<tbody>必须按顺序出现
  • 每个<tr>应包含相同数量的<td>或<th>单元格

结构化表格

使用<thead>、<tbody>和<tfoot>创建结构化的表格：

结构化表格 
<table>
    <caption>2026年销售报告</caption>
    <thead>
        <tr>
            <th>季度</th>
            <th>产品A</th>
            <th>产品B</th>
            <th>总计</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Q1</td>
            <td>¥120,000</td>
            <td>¥80,000</td>
            <td>¥200,000</td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>¥150,000</td>
            <td>¥90,000</td>
            <td>¥240,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总计</td>
            <td>¥270,000</td>
            <td>¥170,000</td>
            <td>¥440,000</td>
        </tr>
    </tfoot>
</table>
2026年销售报告
季度 产品A 产品B 总计
Q1 ¥120,000 ¥80,000 ¥200,000
Q2 ¥150,000 ¥90,000 ¥240,000
总计 ¥270,000 ¥170,000 ¥440,000

W3C结构化表格规范

根据W3C HTML5.3规范，结构化表格应遵循：

  • 每个表格应包含至少一个<tbody>元素
  • <thead>和<tfoot>是可选的，但如果使用，必须按顺序出现
  • 表格可以包含多个<tbody>元素来分组数据
  • <caption>应准确描述表格内容

表格高级特性

列跨度和行跨度

使用colspan和rowspan属性合并单元格：

单元格合并 
<table>
    <tr>
        <th rowspan="2">姓名</th>
        <th colspan="2">联系信息</th>
    </tr>
    <tr>
        <th>电话</th>
        <th>邮箱</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>123-4567</td>
        <td>zhang@example.com</td>
    </tr>
</table>
姓名 联系信息
电话 邮箱
张三 123-4567 zhang@example.com

列分组

使用<colgroup>和<col>对列进行分组和样式设置：

列分组 
<table>
    <colgroup>
        <col span="2" style="background-color: #f9f9f9;">
        <col style="background-color: #e6f7ff;">
    </colgroup>
    <tr>
        <th>产品</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
    <tr>
        <td>手机</td>
        <td>¥2999</td>
        <td>50</td>
    </tr>
</table>

W3C高级表格特性规范

根据W3C HTML Living Standard，高级表格特性应遵循：

  • colspan和rowspan的值必须为正整数
  • 合并单元格不能创建重叠的单元格
  • 使用<colgroup>和<col>时应考虑可访问性
  • 避免过度复杂的单元格合并，这会降低可访问性

表格可访问性

为了确保表格对所有用户都可访问，应该遵循以下最佳实践：

使用scope属性

scope属性 
<table>
    <tr>
        <th scope="col">产品</th>
        <th scope="col">一月</th>
        <th scope="col">二月</th>
    </tr>
    <tr>
        <th scope="row">手机</th>
        <td>120</td>
        <td>150</td>
    </tr>
    <tr>
        <th scope="row">平板</th>
        <td>80</td>
        <td>95</td>
    </tr>
</table>

使用headers和id属性

headers属性 
<table>
    <tr>
        <th id="product">产品</th>
        <th id="q1">Q1</th>
        <th id="q2">Q2</th>
    </tr>
    <tr>
        <th id="phone" headers="product">手机</th>
        <td headers="phone q1">120</td>
        <td headers="phone q2">150</td>
    </tr>
</table>

提供表格摘要

表格摘要 
<table aria-describedby="table-summary">
    <caption>2026年销售数据</caption>
    <!-- 表格内容 -->
</table>
<p id="table-summary" class="sr-only">
    此表格显示2026年各季度不同产品的销售数据，包括手机、平板和电脑的销售额。
</p>

W3C表格可访问性规范

根据W3C WAI-ARIA和HTML规范，表格可访问性应遵循：

  • 为复杂表格提供summary属性或aria-describedby
  • 使用scope属性明确表头与数据的关系
  • 为复杂表格使用headers和id属性
  • 使用<caption>提供表格标题
  • 确保表格在纯文本模式下仍然可理解

响应式表格

针对移动设备优化表格显示：

水平滚动

水平滚动表格 
<div style="overflow-x: auto;">
    <table style="min-width: 600px;">
        <!-- 宽表格内容 -->
    </table>
</div>

堆叠式表格

堆叠式表格 
<table>
    <tr>
        <td data-label="姓名">张三</td>
        <td data-label="年龄">25</td>
        <td data-label="城市">北京</td>
    </tr>
</table>

<style>
@media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    td::before {
        content: attr(data-label) ": ";
        font-weight: bold;
    }
}
</style>

W3C响应式表格规范

根据W3C CSS规范，响应式表格应遵循：

  • 使用overflow-x: auto处理水平溢出
  • 使用媒体查询针对不同屏幕尺寸优化显示
  • 考虑使用display: block在小屏幕上堆叠表格行
  • 确保表格内容在小屏幕上仍然可读

表格样式和设计

CSS表格样式

CSS表格样式 
<style>
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        font-family: Arial, sans-serif;
    }
    
    th, td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }
    
    th {
        background-color: #f2f2f2;
        font-weight: bold;
        color: #333;
    }
    
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    tr:hover {
        background-color: #f5f5f5;
    }
    
    caption {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
        caption-side: top;
    }
</style>

斑马纹表格

斑马纹表格 
<style>
    .zebra-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .zebra-table th,
    .zebra-table td {
        padding: 12px 15px;
        border: 1px solid #ddd;
    }
    
    .zebra-table thead th {
        background-color: #4CAF50;
        color: white;
    }
    
    .zebra-table tbody tr:nth-child(even) {
        background-color: #f2f2f2;
    }
    
    .zebra-table tbody tr:hover {
        background-color: #e9e9e9;
    }
</style>

W3C表格样式规范

根据W3C CSS规范，表格样式应遵循：

  • 使用border-collapse: collapse合并表格边框
  • 为表头提供足够的视觉区分
  • 确保表格内容与背景有足够的对比度
  • 使用斑马纹提高长表格的可读性
  • 为交互式表格行提供悬停效果

动手练习

创建一个包含高级特性的HTML表格：

综合练习 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课程表 - 表格练习</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .time {
            background-color: #e6f7ff;
        }
        .break {
            background-color: #fff7e6;
        }
    </style>
</head>
<body>
    <h1>2026年春季课程表</h1>
    
    <table>
        <caption>计算机科学专业课程安排</caption>
        <thead>
            <tr>
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="time">08:00-09:30</th>
                <td>数据结构</td>
                <td></td>
                <td>数据结构</td>
                <td></td>
                <td>数据结构实验</td>
            </tr>
            <tr>
                <th class="time">09:45-11:15</th>
                <td>算法分析</td>
                <td>Web开发</td>
                <td>算法分析</td>
                <td>Web开发</td>
                <td></td>
            </tr>
            <tr>
                <th class="break">11:15-13:00</th>
                <td colspan="5">午休</td>
            </tr>
            <tr>
                <th class="time">13:00-14:30</th>
                <td></td>
                <td>数据库系统</td>
                <td></td>
                <td>数据库系统</td>
                <td>Web开发实验</td>
            </tr>
            <tr>
                <th class="time">14:45-16:15</th>
                <td>人工智能</td>
                <td></td>
                <td>人工智能</td>
                <td></td>
                <td>数据库实验</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

下一步学习

掌握表格后，继续学习：

1

列表

学习创建有序和无序列表

继续学习
2

表单

学习创建交互式表单

继续学习