表格

Kpsmart2025年3月1日大约 8 分钟

HTML表格

表格是展示结构化数据的有效方式。HTML提供了一套完整的元素来创建和控制表格。本文将介绍HTML表格的基础知识以及高级特性，并讨论如何创建无障碍的表格。

HTML表格基础

表格的基本结构

HTML表格使用<table>元素创建，由行和单元格组成：

<table>
    <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
    </tr>
    <tr>
        <td>第2行第1列</td>
        <td>第2行第2列</td>
    </tr>
</table>

主要元素说明：

<table> - 定义整个表格
<tr> (table row) - 定义表格的一行
<td> (table data) - 定义表格的一个数据单元格

表格标题和表头

使用<caption>元素为表格添加标题，使用<th>元素定义表头单元格：

<table>
    <caption>员工信息表</caption>
    <tr>
        <th>姓名</th>
        <th>部门</th>
        <th>职位</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>研发部</td>
        <td>工程师</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>市场部</td>
        <td>经理</td>
    </tr>
</table>

<th>元素与<td>类似，但它表示表头单元格，通常会以粗体居中显示。

表格的基本样式

可以使用HTML属性或CSS为表格添加基本样式：

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <!-- 表格内容 -->
</table>

不过，现代HTML开发中，我们通常使用CSS来设置表格样式：

table {
    border-collapse: collapse;
    width: 100%;
}

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

th {
    background-color: #f2f2f2;
}

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

合并单元格

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

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">联系方式</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>电话：123456</td>
        <td>邮箱：zhangsan@example.com</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>电话：654321</td>
        <td>邮箱：lisi@example.com</td>
    </tr>
    <tr>
        <td>微信：lisi123</td>
        <td>QQ：987654321</td>
    </tr>
</table>

colspan - 指定单元格横跨的列数
rowspan - 指定单元格纵跨的行数

HTML表格进阶特性

表格结构元素

HTML提供了几个元素来定义表格的不同部分，使表格结构更加清晰：

<table>
    <caption>季度销售报告</caption>
    <thead>
        <tr>
            <th>产品</th>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
            <th>Q4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>产品A</td>
            <td>100</td>
            <td>150</td>
            <td>200</td>
            <td>250</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>200</td>
            <td>250</td>
            <td>300</td>
            <td>350</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总计</th>
            <td>300</td>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </tfoot>
</table>

<thead> - 定义表格的表头部分
<tbody> - 定义表格的主体部分
<tfoot> - 定义表格的页脚部分

这些元素不仅提供了语义结构，还允许你为表格的不同部分应用不同的样式，并在打印长表格时在每页重复表头和页脚。

列组

<colgroup>和<col>元素用于定义表格列组，便于为整列应用样式：

<table>
    <colgroup>
        <col style="background-color: #f2f2f2;">
        <col span="2" style="background-color: #e6f7ff;">
        <col style="background-color: #f9f9f9;">
    </colgroup>
    <tr>
        <th>产品</th>
        <th>价格</th>
        <th>库存</th>
        <th>状态</th>
    </tr>
    <tr>
        <td>产品A</td>
        <td>100</td>
        <td>50</td>
        <td>在售</td>
    </tr>
    <tr>
        <td>产品B</td>
        <td>200</td>
        <td>30</td>
        <td>在售</td>
    </tr>
</table>

<col>元素的span属性指定该样式应用于多少列。

表格标题和摘要

除了使用<caption>元素为表格添加可见标题外，还可以使用summary属性为表格提供摘要信息（虽然在HTML5中已弃用，但对可访问性仍有帮助）：

<table summary="本表格显示了2023年各季度的销售数据，包括产品A和产品B的销售量。">
    <!-- 表格内容 -->
</table>

在HTML5中，建议使用<caption>元素并结合ARIA属性来提供更详细的描述：

<table aria-describedby="table-desc">
    <caption>2023年季度销售报告</caption>
    <!-- 表格内容 -->
</table>
<div id="table-desc" class="sr-only">
    本表格显示了2023年各季度的销售数据，包括产品A和产品B的销售量。
</div>

响应式表格

在移动设备上，宽表格可能会导致水平滚动，影响用户体验。以下是几种创建响应式表格的方法：

1. 使用容器和水平滚动

<div style="overflow-x: auto;">
    <table>
        <!-- 表格内容 -->
    </table>
</div>

2. 在小屏幕上重新排列表格

使用CSS媒体查询在小屏幕上改变表格的显示方式：

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr {
        margin-bottom: 15px;
    }
    
    td {
        border: none;
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        position: absolute;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        content: attr(data-label);
        font-weight: bold;
    }
}

HTML中需要添加data-label属性：

<tr>
    <td data-label="产品">产品A</td>
    <td data-label="价格">100</td>
    <td data-label="库存">50</td>
</tr>

表格无障碍性

创建无障碍的表格对于使用屏幕阅读器的用户至关重要。以下是一些最佳实践：

1. 使用适当的表格结构

使用<th>元素定义表头
使用<caption>提供表格标题
使用<thead>, <tbody>, <tfoot>定义表格结构

2. 使用scope属性

scope属性指定表头单元格是行表头还是列表头：

<table>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">职业</th>
    </tr>
    <tr>
        <th scope="row">张三</th>
        <td>25</td>
        <td>工程师</td>
    </tr>
    <tr>
        <th scope="row">李四</th>
        <td>30</td>
        <td>设计师</td>
    </tr>
</table>

3. 使用id和headers属性

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

<table>
    <tr>
        <th id="name">姓名</th>
        <th id="q1">第一季度</th>
        <th id="q2">第二季度</th>
    </tr>
    <tr>
        <th id="zhang">张三</th>
        <td headers="zhang q1">100</td>
        <td headers="zhang q2">150</td>
    </tr>
    <tr>
        <th id="li">李四</th>
        <td headers="li q1">200</td>
        <td headers="li q2">250</td>
    </tr>
</table>

4. 避免使用表格进行布局

表格应该用于展示表格数据，而不是用于页面布局。对于页面布局，应该使用CSS技术如Flexbox或Grid。

5. 提供足够的颜色对比度

确保表格中的文本与背景之间有足够的颜色对比度，使视力障碍用户能够轻松阅读。

表格最佳实践

保持简单：避免创建过于复杂的表格结构
提供清晰的标题和表头：帮助用户理解表格内容
使用适当的语义元素：如<thead>, <tbody>, <th>等
考虑响应式设计：确保表格在各种设备上都能良好显示
注意可访问性：使用适当的属性和结构使表格对所有用户可访问
使用CSS进行样式设置：避免使用已弃用的HTML表格样式属性

实际应用示例

产品比较表

<table>
    <caption>智能手机比较</caption>
    <thead>
        <tr>
            <th scope="col">特性</th>
            <th scope="col">手机A</th>
            <th scope="col">手机B</th>
            <th scope="col">手机C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">屏幕尺寸</th>
            <td>6.1英寸</td>
            <td>6.5英寸</td>
            <td>6.7英寸</td>
        </tr>
        <tr>
            <th scope="row">电池容量</th>
            <td>3000mAh</td>
            <td>4000mAh</td>
            <td>5000mAh</td>
        </tr>
        <tr>
            <th scope="row">摄像头</th>
            <td>1200万像素</td>
            <td>4800万像素</td>
            <td>6400万像素</td>
        </tr>
        <tr>
            <th scope="row">价格</th>
            <td>¥3999</td>
            <td>¥4999</td>
            <td>¥5999</td>
        </tr>
    </tbody>
</table>

时间表/课程表

<table>
    <caption>每周课程表</caption>
    <colgroup>
        <col style="width: 15%;">
        <col style="width: 17%;">
        <col style="width: 17%;">
        <col style="width: 17%;">
        <col style="width: 17%;">
        <col style="width: 17%;">
    </colgroup>
    <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">9:00-10:30</th>
            <td>数学</td>
            <td>语文</td>
            <td>英语</td>
            <td>物理</td>
            <td>化学</td>
        </tr>
        <tr>
            <th scope="row">10:45-12:15</th>
            <td>物理</td>
            <td>数学</td>
            <td>化学</td>
            <td>语文</td>
            <td>英语</td>
        </tr>
        <tr>
            <th scope="row">14:00-15:30</th>
            <td>英语</td>
            <td>化学</td>
            <td>语文</td>
            <td>数学</td>
            <td>物理</td>
        </tr>
        <tr>
            <th scope="row">15:45-17:15</th>
            <td>化学</td>
            <td>英语</td>
            <td>数学</td>
            <td>语文</td>
            <td>自习</td>
        </tr>
    </tbody>
</table>

财务报表

<table>
    <caption>2023年第一季度财务报表</caption>
    <thead>
        <tr>
            <th scope="col">月份</th>
            <th scope="col">收入</th>
            <th scope="col">支出</th>
            <th scope="col">净利润</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">一月</th>
            <td>¥100,000</td>
            <td>¥70,000</td>
            <td>¥30,000</td>
        </tr>
        <tr>
            <th scope="row">二月</th>
            <td>¥120,000</td>
            <td>¥80,000</td>
            <td>¥40,000</td>
        </tr>
        <tr>
            <th scope="row">三月</th>
            <td>¥150,000</td>
            <td>¥90,000</td>
            <td>¥60,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">季度总计</th>
            <td>¥370,000</td>
            <td>¥240,000</td>
            <td>¥130,000</td>
        </tr>
    </tfoot>
</table>

总结

HTML表格是展示结构化数据的强大工具。通过本文，你已经学习了：

表格的基本结构和元素
如何创建表头和合并单元格
表格的高级特性，如表格结构元素和列组
如何创建响应式表格
表格的无障碍性最佳实践
实际应用示例

掌握这些知识将帮助你创建结构良好、易于理解且对所有用户都可访问的表格。在下一章中，我们将学习HTML表单，这是用户与网站交互的重要方式。

记住，表格应该用于展示表格数据，而不是用于页面布局。对于页面布局，应该使用现代CSS技术如Flexbox或Grid。通过遵循本文介绍的最佳实践，你可以确保你的表格既美观又实用。