HTML表格如何从零开始详细学习？-建站教程-锦华智联科技

HTML 表格详细教程

HTML 表格是一种用于在网页上展示结构化数据的强大工具，它由行、列和单元格组成，非常适合展示像财务报表、时间表、产品列表等数据。

（图片来源网络，侵删）

第一步：创建一个最简单的表格

一个最基本的 HTML 表格由三个核心标签构成：

<table>: 定义整个表格的容器。
<tr>: 定义表格中的行。
<td>: 定义行中的单元格（Data Cell）。

让我们来看一个最简单的例子：

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

代码解释：

<table>...</table> 包裹了整个表格。
第一个 <tr>...</tr> 定义了表头行。
后面的 <tr>...</tr> 定义了数据行。
每一行内的 <td>...</td> 定义了该行中的每一个单元格。

在浏览器中打开这个文件，你会看到一个没有边框的、简单的表格，为了让表格看起来更清晰,我们需要添加一些标签和样式。

第二步：添加表格标题和表头

为了让表格更具可读性,我们需要：

：使用 <caption> 标签，它为整个表格提供一个标题。<caption> 必须作为 <table> 的第一个子元素。
表头单元格：使用 <th> 标签（Table Header）代替 <td> 来定义表头。<th> 单元格中的文本会默认加粗并居中显示。

示例代码：

<table>
    <caption>2025年第一季度销售数据</caption>
    <tr>
        <th>月份</th>
        <th>产品A</th>
        <th>产品B</th>
    </tr>
    <tr>
        <td>一月</td>
        <td>15000</td>
        <td>12000</td>
    </tr>
    <tr>
        <td>二月</td>
        <td>18000</td>
        <td>15000</td>
    </tr>
</table>

第三步：表格的结构化分组（重要）

对于复杂的表格，使用结构化分组标签 <thead>, <tbody>, 和 <tfoot> 是一个非常好的习惯，这不仅能提高代码的可读性，还有利于搜索引擎优化（SEO）和屏幕阅读器（辅助技术）的解析。

<thead>: 定义表格的表头部分，通常包含 <tr> 和 <th>。
<tbody>: 定义表格的主体部分,包含表格的主要数据。
<tfoot>: 定义表格的页脚部分,通常包含汇总行。

示例代码：

<table>
    <caption>公司部门预算</caption>
    <thead>
        <tr>
            <th>部门</th>
            <th>预算 (万元)</th>
            <th>实际支出 (万元)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>市场部</td>
            <td>50</td>
            <td>48</td>
        </tr>
        <tr>
            <td>研发部</td>
            <td>80</td>
            <td>85</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td><strong>总计</strong></td>
            <td><strong>130</strong></td>
            <td><strong>133</strong></td>
        </tr>
    </tfoot>
</table>

注意： <tfoot> 部分在视觉上通常出现在 <tbody> 之后，但在 HTML 代码中，<tfoot> 的定义可以放在 <tbody> 之前或之后,浏览器会自动将其渲染到表格底部。

第四步：合并单元格

有时，我们需要创建跨越多行或多列的单元格，这叫做“合并单元格”。

跨列合并：使用 colspan 属性（column span）,这个属性定义了单元格应该横跨多少列。
跨行合并：使用 rowspan 属性（row span）,这个属性定义了单元格应该横跨多少行。

跨列合并 (`colspan`)

假设我们想让“季度”这个标题横跨三列。

<table border="1">
    <tr>
        <th colspan="3">2025年第一季度</th>
    </tr>
    <tr>
        <th>一月</th>
        <th>二月</th>
        <th>三月</th>
    </tr>
    <tr>
        <td>150</td>
        <td>180</td>
        <td>200</td>
    </tr>
</table>

<th colspan="3"> 告诉浏览器这个单元格需要横跨3列，因此它后面就不需要再跟 <th> 或 <td> 了。

跨行合并 (`rowspan`)

假设我们想让“产品类别”这个标题垂直跨两行。

<table border="1">
    <tr>
        <th rowspan="2">产品类别</th>
        <th>销量</th>
        <th>收入</th>
    </tr>
    <tr>
        <!-- 第一个单元格已被上一行合并，这里留空 -->
        <td>1000</td>
        <td>50000</td>
    </tr>
</table>

<th rowspan="2"> 告诉浏览器这个单元格需要垂直跨2行，在下一行的对应位置，我们必须省略一个单元格（不能写 <td></td>）,否则表格就会错乱。

第五步：使用 CSS 美化表格

原生 HTML 表格样式非常简陋，我们通常使用 CSS（层叠样式表）来美化它。

添加边框

最简单的美化就是给表格和单元格加上边框。

<style>
    table {
        width: 100%; /* 表格宽度为100% */
        border-collapse: collapse; /* 合并边框，避免双边框 */
        font-family: sans-serif;
    }
    th, td {
        border: 1px solid #dddddd; /* 单元格边框 */
        text-align: left; /* 文字左对齐 */
        padding: 8px; /* 单元格内边距 */
    }
    thead tr {
        background-color: #f2f2f2; /* 表头背景色 */
    }
    /* 隔行变色 */
    tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    /* 鼠标悬停高亮 */
    tbody tr:hover {
        background-color: #e2e2e2;
    }
</style>
<table>
    <!-- ... 表格内容 ... -->
</table>

CSS 属性解释：

border-collapse: collapse;: 这是表格美化的关键属性，它将相邻的边框合并成一条,使表格看起来更整洁。
width: 100%: 让表格宽度充满其父容器。
padding: 为单元格内容添加内边距,使文字不紧贴边框。
text-align: 控制单元格内文字的对齐方式。
nth-child(even): CSS 选择器，用于选择偶数行,实现隔行变色效果。
hover: CSS 伪类，当鼠标悬停在行上时触发,用于实现高亮效果。

第六步：高级主题

<colgroup> 和

<col>
这两个标签用于对整列应用样式,而无需为每个单元格单独设置。

<colgroup>: 定义表格中的一个或多个列的分组。
<col>: 用于定义 <colgroup> 内的单个列的属性。

示例：
<style>
    /* 第一列样式 */
    .col-name {
        background-color: #ffdddd;
    }
    /* 第二、三列样式 */
    .col-data {
        background-color: #ddffdd;
    }
</style>
<table>
    <colgroup>
        <col class="col-name"> <!-- 对应第一列 -->
        <col class="col-data"> <!-- 对应第二列 -->
        <col class="col-data"> <!-- 对应第三列 -->
    </colgroup>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>王五</td>
            <td>28</td>
            <td>上海</td>
        </tr>
    </tbody>
</table>
可访问性 - <scope> 属性
为了帮助屏幕阅读器等辅助技术更好地理解表格结构，应该在表头单元格 <th> 上使用 scope 属性。

scope="col": 表示该单元格是其所在列的表头。
scope="row": 表示该单元格是其所在行的表头。

示例：
<table>
    <thead>
        <tr>
            <th scope="col">姓名</th>
            <th scope="col">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">赵六</th>
            <td>30</td>
        </tr>
    </tbody>
</table>

第七步：常见错误与最佳实践


不要用表格来布局整个网页！

错误用法：在 <table> 中嵌套多个 <tr> 来创建网页的页头、侧边栏和内容区。
正确原因：表格布局是给数据设计的，它会导致代码冗余、加载速度慢、可访问性差、难以维护，现代网页布局应使用 Flexbox 和 Grid。



始终为复杂的表格添加 <thead>, <tbody>, <tfoot>：这有助于代码组织和可访问性。


使用 scope 属性：提高表格的可访问性。


使用 CSS 进行样式设计（HTML）和表现（CSS）分离是现代网页开发的核心原则。


表格响应式设计：在小屏幕设备上，宽表格可能会溢出容器，可以使用 CSS 的 overflow-x: auto; 让表格在水平方向上滚动。
.responsive-table {
    overflow-x: auto; /* 在小屏幕上允许水平滚动 */
    -webkit-overflow-scrolling: touch; /* 在iOS上提供平滑滚动 */
}
然后将你的 <table> 包裹在一个 <div class="responsive-table"> 中。



完整综合示例
下面是一个结合了所有知识点的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">综合表格示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
        }
        thead th {
            background-color: #4CAF50;
            color: white;
        }
        tbody tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tbody tr:hover {
            background-color: #ddd;
        }
        tfoot td {
            font-weight: bold;
            text-align: right;
            background-color: #f9f9f9;
        }
        .responsive-table {
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>月度财务报表</h1>
    <p>以下是2025年10月的财务摘要。</p>
    <div class="responsive-table">
        <table>
            <caption>2025年10月收支明细</caption>
            <colgroup>
                <col span="3"> <!-- 前三列一组 -->
                <col class="total-col" style="background-color: #ffffcc;"> <!-- 最后一列特殊样式 -->
            </colgroup>
            <thead>
                <tr>
                    <th scope="col">项目</th>
                    <th scope="col">类别</th>
                    <th scope="col">金额 (元)</th>
                    <th scope="col">备注</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>工资收入</td>
                    <td>收入</td>
                    <td>15000</td>
                    <td>税后</td>
                </tr>
                <tr>
                    <td>房租</td>
                    <td>支出</td>
                    <td>-3500</td>
                    <td>月付</td>
                </tr>
                <tr>
                    <td>餐饮</td>
                    <td>支出</td>
                    <td>-1200</td>
                    <td></td>
                </tr>
                <tr>
                    <td>交通</td>
                    <td>支出</td>
                    <td>-500</td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="2"><strong>净收入</strong></td>
                    <td><strong>9800</strong></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
这个例子包含了表格标题、表头、主体、页脚、跨列合并、CSS 美化、响应式容器和列分组,是一个功能齐全且美观的表格。





描述
属性




<table>
定义表格
-


<caption>
定义表格标题
-


<thead>
定义表格的表头部分
-


<tbody>
定义表格的主体部分
-


<tfoot>
定义表格的页脚部分
-


<tr>
定义表格行
-


<th>
定义表头单元格
scope (row/col)


<td>
定义数据单元格
colspan, rowspan


<colgroup>
定义列的分组
span


<col>
定义列的属性
span, class



通过这份教程，你应该已经掌握了从创建到美化 HTML 表格的所有核心知识，表格是展示结构化数据的利器,请务必在正确的场景下使用它。

描述	属性
`<table>`	定义表格	-
`<caption>`	定义表格标题	-
`<thead>`	定义表格的表头部分	-
`<tbody>`	定义表格的主体部分	-
`<tfoot>`	定义表格的页脚部分	-
`<tr>`	定义表格行	-
`<th>`	定义表头单元格	`scope` (row/col)
`<td>`	定义数据单元格	`colspan`, `rowspan`
`<colgroup>`	定义列的分组	`span`
`<col>`	定义列的属性	`span`, `class`

HTML表格如何从零开始详细学习？

HTML 表格详细教程

第一步：创建一个最简单的表格

第二步：添加表格标题和表头

第三步：表格的结构化分组（重要）

第四步：合并单元格

跨列合并 (colspan)

跨行合并 (rowspan)

第五步：使用 CSS 美化表格

添加边框

第六步：高级主题

可访问性 - <scope> 属性

第七步：常见错误与最佳实践

完整综合示例

跨列合并 (`colspan`)

跨行合并 (`rowspan`)

可访问性 - `<scope>` 属性