HTML5 表格制作教程：从入门到精通

本教程将带你了解如何使用 HTML5 标签创建结构清晰、语义化强的表格，并使用 CSS 进行美化。

html5表格制作教程
（图片来源网络，侵删）

第一部分：基础表格结构

一个最简单的 HTML 表格由以下几个核心标签组成：

  1. <table>: 表格的容器，所有表格内容都放在这个标签内。
  2. <tr>: Table Row（表格行），定义表格中的一行。
  3. <td>: Table Data（表格数据），定义行中的一个单元格。
  4. <th>: Table Header（表头单元格），用于定义表头，通常使用粗体显示。

示例 1：最简单的表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个表格</title>
</head>
<body>
    <h2>学生成绩单</h2>
    <table>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>语文</td>
            <td>95</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>数学</td>
            <td>88</td>
        </tr>
    </table>
</body>
</html>

代码解释：

  • <table>...</table> 包裹了整个表格。
  • 第一组 <tr>...</tr> 是表头行，里面包含了三个 <th>...</th> 单元格。
  • 后面的 <tr>...</tr> 是数据行，里面包含了 <td>...</td> 单元格。

在浏览器中打开这个 HTML 文件，你会看到一个基础的表格，但样式非常朴素。

第二部分：让表格更完整（结构化标签）

为了增强表格的可读性和可访问性,HTML5 提供了一些重要的结构化标签。

html5表格制作教程
（图片来源网络，侵删）
  1. <thead>: Table Head（表头部分），用于包裹表格的表头行，这对于屏幕阅读器等辅助技术非常重要，它可以将这部分内容识别为表头。
  2. <tbody>: Table Body（表体部分），用于包裹表格的数据行，一个表格可以有多个 <tbody>。
  3. <tfoot>: Table Foot（表脚部分），用于包裹表格的底部行，通常用于放置总计、平均值等汇总信息。

示例 2：使用结构化标签

我们将上一个例子进行优化：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>科目</th>
            <th>分数</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>语文</td>
            <td>95</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>数学</td>
            <td>88</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">平均分</td> <!-- 我们将在下一节学习 colspan -->
            <td>91.5</td>
        </tr>
    </tfoot>
</table>

为什么这很重要？

  • 语义化：清晰地告诉浏览器和开发者，表格的哪一部分是头部，哪一部分是主体。
  • 样式控制：你可以单独为 <thead>, <tbody>, <tfoot> 设置不同的样式（给表头添加背景色，给表脚添加加粗字体）。
  • 可访问性：屏幕阅读器可以正确地朗读表头，并在滚动到表体时重复表头信息，极大地改善了视障用户的体验。

第三部分：合并单元格

有时我们需要跨行或跨列显示内容,这时就需要用到单元格合并。

  1. 跨列合并

    • 属性：colspan
    • 用法：<td colspan="2"> 表示这个单元格横跨 2 列。
    • 注意：合并后，需要从下一行中相应地删除被合并的单元格数量。

  2. 跨行合并

    • 属性：rowspan
    • 用法：<td rowspan="2"> 表示这个单元格纵向跨越 2 行。
    • 注意：合并后，需要从同一行的后续列中相应地删除被合并的单元格数量。

示例 3：合并单元格

假设我们要制作一个课程表：

<table border="1"> <!-- 加个边框方便观察 -->
    <tr>
        <th>时间</th>
        <th>周一</th>
        <th>周二</th>
    </tr>
    <tr>
        <th>上午</th>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <th>下午</th>
        <!-- "自习" 跨了周二和周三，但我们没有周三列，所以这里只演示跨列 -->
        <td colspan="2">自习</td> 
        <!-- 注意：因为 "自习" 跨了2列，所以这一行后面不能再有 <td> 了 -->
    </tr>
</table>

再来看一个 rowspan 的例子：

<table border="1">
    <tr>
        <th rowspan="2">学生信息</th> <!-- 这个单元格横跨2行 -->
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <!-- "学生信息" 已经占了这一行的第一个位置，所以这里不再需要 <th> -->
        <td>王五</td>
        <td>20</td>
    </tr>
</table>

第四部分：使用 CSS 美化表格

原生 HTML 表格非常简陋，我们需要用 CSS 来让它变得美观、专业。

基础样式

我们可以为表格、行、单元格添加边框、背景色、内边距等。

/* 为表格添加边框，并设置边框合并 */
table {
    width: 100%; /* 表格宽度 */
    border-collapse: collapse; /* 合并边框，避免双线 */
    font-family: Arial, sans-serif;
}
/* 为所有单元格（th, td）添加边框和内边距 */
th, td {
    border: 1px solid #dddddd; /* 灰色边框 */
    padding: 8px; /* 内边距 */
    text-align: left; /* 文字左对齐 */
}
/* 为表头单元格添加背景色和文字颜色 */
th {
    background-color: #f2f2f2;
    color: #333;
}
/* 为表格主体中的偶数行添加背景色（斑马线效果） */
tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
/* 鼠标悬停在行上时的高亮效果 */
tbody tr:hover {
    background-color: #e2e2e2;
    cursor: pointer;
}

如何应用 CSS？ 你可以将上面的 CSS 代码放在 <head> 标签内的 <style> 标签中：

<head>
    <meta charset="UTF-8">美化后的表格</title>
    <style>
        /* 把上面的 CSS 代码粘贴到这里 */
    </style>
</head>

第五部分：最佳实践与进阶技巧

响应式表格

当屏幕宽度小于表格宽度时,表格会出现水平滚动条，我们可以使用 CSS 的 @media 查询来创建响应式表格。

/* 默认情况下，表格正常显示 */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
}
/* 当屏幕宽度小于 768px 时（例如手机） */
@media screen and (max-width: 768px) {
    .responsive-table {
        /* 将表格变为块级元素 */
        display: block;
        overflow-x: auto; /* 允许水平滚动 */
        white-space: nowrap; /* 防止文字换行 */
    }
}

<caption>

使用 <caption> 可以为表格添加一个标题或说明，这对可访问性很有帮助。

<table>
    <caption>2025年第四季度销售报表</caption>
    <thead>
        <!-- ... -->
    </thead>
    <tbody>
        <!-- ... -->
    </tbody>
</table>

<scope> 属性

在复杂的表格中,为 <th> 添加 scope 属性可以更精确地定义其作用范围，进一步优化可访问性。

  • scope="col"：表示该表头作用于其所在的列。
  • scope="row"：表示该表头作用于其所在的行。
<thead>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">语文</th>
        <th scope="col">数学</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">张三</th>
        <td>95</td>
        <td>88</td>
    </tr>
</tbody>

创建一个完整的 HTML5 表格

让我们把所有知识点整合起来,创建一个最终版的、结构完整、样式美观的表格。

HTML 代码 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">完整示例：员工信息表</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        /* 表格容器 */
        .table-container {
            width: 80%;
            margin: 0 auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden; /* 让圆角效果应用到表格 */
        }
        /* 表格基础样式 */
        table {
            width: 100%;
            border-collapse: collapse; /* 合并边框 */
        }
        /* 表格标题 */
        caption {
            caption-side: top; /* 将标题放在表格上方 */
            padding: 15px;
            font-size: 1.5em;
            font-weight: bold;
            background-color: #4CAF50;
            color: white;
        }
        /* 单元格样式 */
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        /* 表头样式 */
        thead th {
            background-color: #4CAF50;
            color: white;
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 0.5px;
        }
        /* 表体样式 */
        tbody tr {
            transition: background-color 0.3s ease;
        }
        /* 斑马线样式 */
        tbody tr:nth-of-type(even) {
            background-color: #f8f8f8;
        }
        /* 鼠标悬停效果 */
        tbody tr:hover {
            background-color: #e8f5e9;
            cursor: pointer;
        }
        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .table-container {
                width: 95%;
            }
            table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            caption {
                caption-side: bottom; /* 在小屏幕上，标题放下面更合适 */
            }
        }
    </style>
</head>
<body>
    <div class="table-container">
        <table>
            <caption>员工信息表</caption>
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">姓名</th>
                    <th scope="col">部门</th>
                    <th scope="col">职位</th>
                    <th scope="col">入职日期</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1001</td>
                    <td>赵六</td>
                    <td>技术部</td>
                    <td>前端工程师</td>
                    <td>2025-03-15</td>
                </tr>
                <tr>
                    <td>1002</td>
                    <td>钱七</td>
                    <td>市场部</td>
                    <td>市场专员</td>
                    <td>2025-07-22</td>
                </tr>
                <tr>
                    <td>1003</td>
                    <td>孙八</td>
                    <td>技术部</td>
                    <td>后端工程师</td>
                    <td>2025-11-01</td>
                </tr>
                <tr>
                    <td>1004</td>
                    <td>周九</td>
                    <td>人事部</td>
                    <td>HR经理</td>
                    <td>2025-05-30</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

这个最终示例包含了：

  • 语义化结构：<table>, <caption>, <thead>, <tbody>, <th>, <td>, scope 属性。
  • CSS 美化：边框、内边距、背景色、悬停效果、斑马线。
  • 响应式设计：使用 @media 查询确保在移动设备上也能良好显示。
  • 良好的用户体验：清晰的视觉层次和交互反馈。

希望这份详细的教程能帮助你完全掌握 HTML5 表格的制作！