第一步：理解 <table> 的核心结构

一个标准的 HTML 表格由以下几个核心标签嵌套而成，理解它们的关系是关键：

用table标签制作网页的步骤
（图片来源网络，侵删）
  1. <table>: 表格的根容器，所有表格内容都必须放在这个标签内。
  2. <tr> (Table Row): 表格的行，一个 <tr> 代表表格中的一行。
  3. <td> (Table Data): 表格的数据单元格。<tr> 内部的 <td> 代表该行中的一个数据格子。
  4. <th> (Table Header): 表格的表头单元格，功能上和 <td> 一样，用于放置内容，但浏览器会默认将其内容加粗并居中，更重要的是，它具有更强的语义，告诉屏幕阅读器等辅助技术这是一个表头。

基本嵌套关系： <table> → <tr> → (<th> 或 <td>)

第二步：创建一个基础表格

让我们从一个最简单的表格开始,它包含两行三列。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">基础表格示例</title>
</head>
<body>
    <h1>我的第一个表格</h1>
    <table>
        <!-- 第一行：表头 -->
        <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>
</body>
</html>

效果预览： | 姓名 | 城市 | 职业 | | :--- | :--- | :--- | | 张三 | 北京 | 工程师 | | 李四 | 上海 | 设计师 |

用table标签制作网页的步骤
（图片来源网络，侵删）

第三步：使用 CSS 美化表格

默认的表格样式非常朴素,为了让它看起来更专业、更美观，我们需要使用 CSS (层叠样式表)。

美化目标：

  • 添加边框,让单元格界限清晰。
  • 设置表格宽度。
  • 调整内边距,让内容不那么拥挤。
  • 添加斑马纹,提升可读性。
  • 设置表头样式。

代码示例 (在 <head> 中添加 <style> 标签)：

<style>
    /* 1. 设置表格基本样式 */
    table {
        width: 100%; /* 表格宽度占满父容器 */
        border-collapse: collapse; /* 合并边框，避免双边框 */
        font-family: sans-serif; /* 设置字体 */
    }
    /* 2. 设置所有单元格（th和td）的样式 */
    th, td {
        border: 1px solid #dddddd; /* 添加1px实线灰色边框 */
        text-align: left; /* 文字左对齐 */
        padding: 8px; /* 内边距，让内容不贴边 */
    }
    /* 3. 设置表头单元格的特殊样式 */
    th {
        background-color: #f2f2f2; /* 背景色为浅灰色 */
        font-weight: bold; /* 加粗 */
    }
    /* 4. 添加斑马纹：隔行变色 */
    tr:nth-child(even) {
        background-color: #f9f9f9; /* 偶数行背景色 */
    }
    /* 5. 鼠标悬停高亮效果 */
    tr:hover {
        background-color: #e2e2e2; /* 鼠标悬停时行背景变色 */
    }
</style>

应用 CSS 后的效果： 表格会变得清晰、美观，并且有良好的交互体验。

用table标签制作网页的步骤
（图片来源网络，侵删）

第四步：添加表格的辅助功能（重要）

为了让表格对搜索引擎和屏幕阅读器等辅助技术更友好,我们需要添加一些辅助标签。

  1. <caption>: 表格的，它是对整个表格内容的概括，通常放在 <table> 标签的正下方。
  2. <thead> (Table Head): 表格的表头部分，将表头行 <tr> 放入 <thead> 中，可以明确标识表格的头部结构。
  3. <tbody> (Table Body): 表格的主体部分，将所有数据行 <tr> 放入 <tbody> 中，可以明确标识表格的主体内容。
  4. <tfoot> (Table Foot): 表格的脚注部分，用于放置汇总行或注释，通常放在 <tbody> 之后。

结构化后的 HTML 代码：

<table>
    <caption>员工信息表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>城市</th>
            <th>职业</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>北京</td>
            <td>工程师</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>上海</td>
            <td>设计师</td>
        </tr>
    </tbody>
</table>

好处：

  • 语义化：HTML 结构更清晰，代码可读性更高。
  • 可访问性：屏幕阅读器可以正确地告诉用户“这是一个表格，标题是...，表头是...”，极大提升了用户体验。
  • 灵活性：CSS 可以针对 <thead>, <tbody>, <tfoot> 分别设置样式，例如给表头和表脚添加不同的背景色。

第五步：进阶技巧

合并单元格

有时我们需要跨越多行或多列的单元格。

  • 跨行合并: 使用 rowspan 属性，指定要合并的行数。
  • 跨列合并: 使用 colspan 属性，指定要合并的列数。

注意：被合并的单元格需要从代码中移除，否则会导致表格结构错乱。

代码示例：

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th colspan="2">联系方式</th> <!-- 跨2列 -->
        </tr>
        <tr>
            <th></th> <!-- 此处为占位，保持结构对齐 -->
            <th>电话</th>
            <th>邮箱</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王五</td>
            <td>138-xxxx-xxxx</td>
            <td>wangwu@example.com</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td rowspan="2">139-xxxx-xxxx</td> <!-- 跨2行 -->
            <td>zhaoliu@example.com</td>
        </tr>
        <tr>
            <td>孙七</td>
            <!-- 此处的 <td> 被上一行的 rowspan 合并了，所以不需要写 -->
            <td>sunqi@example.com</td>
        </tr>
    </tbody>
</table>

为单元格添加背景色

可以使用 CSS 的 background-color 属性为特定单元格或行设置高亮显示。

CSS 示例：

/* 将“北京”所在单元格的背景设为黄色 */
td:contains("北京") { /* 注意：:contains() 是一个非标准选择器，仅作演示 */
    background-color: yellowff0;
}
/* 更规范的做法是给单元格添加 class */
.yellow-bg {
    background-color: #ffffcc;
}

HTML 对应：

<td class="yellow-bg">北京</td>

完整实例：学生成绩单

将以上所有步骤整合,制作一个完整的学生成绩单网页。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">学生成绩单</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            color: #333;
        }
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        caption {
            font-size: 1.5em;
            font-weight: bold;
            margin-bottom: 10px;
            caption-side: top;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }
        thead {
            background-color: #4CAF50; /* 绿色表头 */
            color: white;
        }
        tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tbody tr:hover {
            background-color: #e8f5e9;
        }
        .average {
            font-weight: bold;
            background-color: #e1f5fe;
        }
    </style>
</head>
<body>
    <h1>2025年秋季学期期末成绩</h1>
    <table>
        <caption>高三(1)班学生成绩单</caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>陈一</td>
                <td>95</td>
                <td>98</td>
                <td>92</td>
                <td>285</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>周敏</td>
                <td>88</td>
                <td>85</td>
                <td>90</td>
                <td>263</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>吴亮</td>
                <td>76</td>
                <td>82</td>
                <td>78</td>
                <td>236</td>
            </tr>
            <tr class="average">
                <td colspan="2">班级平均分</td>
                <td>86.3</td>
                <td>88.3</td>
                <td>86.7</td>
                <td>261.3</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

制作网页表格的步骤

  1. 规划结构：想清楚表格需要多少行、多少列，以及哪些是表头。
  2. 编写 HTML：
    • 使用 <table> 作为容器。
    • 用 <caption> 添加表格标题。
    • 用 <thead> 和 <tbody> 分隔表头和主体。
    • 在 <tr> 中使用 <th> 创建表头，使用 <td> 创建数据单元格。
    • 如需特殊布局,使用 rowspan 和 colspan 合并单元格。
  3. 应用 CSS 美化：
    • 设置 border-collapse: collapse 去除双边框。
    • 使用 width 控制表格大小。
    • 使用 padding 调整单元格内边距。
    • 使用 border 添加边框。
    • 使用 background-color 和 hover 等选择器增加视觉效果和交互性。
  4. 确保可访问性：始终使用 <th> 作为表头，并用 <thead> 和 <tbody> 进行语义化分组。

遵循这些步骤,你就可以制作出既美观又功能强大、符合规范的网页表格了。