编程马·菜鸟教程

Appearance

8. HTML表格标签（展示结构化数据，常用实战场景） ​

8.1 表格基本结构 ​

基本标签 ​

HTML表格由以下基本标签组成：

  • <table>：表格容器
  • <tr>：表格行
  • <td>：表格单元格
  • <th>：表头单元格

基本结构示例 ​

html
<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td>数据4</td>
        <td>数据5</td>
        <td>数据6</td>
    </tr>
</table>

8.2 表格属性 ​

常用属性 ​

属性描述示例
border设置表格边框宽度<table border="1">
width设置表格宽度<table width="100%">
align设置表格对齐方式<table align="center">
cellpadding设置单元格内边距<table cellpadding="5">
cellspacing设置单元格间距<table cellspacing="5">

注意事项 ​

  • 现代网页开发中，推荐使用CSS来设置表格样式，而不是使用HTML属性
  • HTML5中已废弃了一些表格属性，如 bgcolor、bordercolor 等

8.3 表格合并 ​

跨行合并：rowspan ​

使用 rowspan 属性可以合并多行单元格。

html
<table border="1">
    <tr>
        <th rowspan="2">姓名</th>
        <th>科目</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>数学</td>
        <td>90</td>
    </tr>
</table>

跨列合并：colspan ​

使用 colspan 属性可以合并多列单元格。

html
<table border="1">
    <tr>
        <th colspan="3">学生成绩表</th>
    </tr>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>数学</td>
        <td>90</td>
    </tr>
</table>

新手必练 ​

  • 尝试创建一个包含跨行和跨列合并的表格
  • 注意合并后的单元格结构，确保表格的完整性

8.4 表格标题与表头 ​

表格标题：caption ​

使用 <caption> 标签可以为表格添加标题。

html
<table border="1">
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>数学</td>
        <td>90</td>
    </tr>
</table>

表头：th ​

<th> 标签用于定义表头单元格，默认会加粗居中显示。

html
<tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
</tr>

8.5 新手避坑：表格合并后布局错乱 ​

常见问题 ​

  • 单元格数量不匹配：合并单元格后，每行的单元格数量不一致
  • 嵌套表格：表格嵌套层次过多，导致布局复杂
  • 样式冲突：CSS样式与HTML属性冲突

解决方案 ​

  1. 规划表格结构：在合并单元格前，先规划好表格的结构
  2. 检查单元格数量：确保每行的单元格数量（包括合并的）一致
  3. 使用CSS：尽量使用CSS来设置表格样式，避免使用HTML属性
  4. 简化结构：尽量减少表格的嵌套层次

8.6 实战：制作学生信息表、商品价格表、数据统计表格 ​

实战目标 ​

制作包含学生信息表、商品价格表和数据统计表格的网页。

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表格标签实战</title>
</head>
<body>
    <h1>HTML表格标签的使用</h1>
    
    <!-- 学生信息表 -->
    <h2>一、学生信息表</h2>
    <table border="1" width="100%" cellpadding="5">
        <caption>学生基本信息</caption>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>专业</th>
        </tr>
        <tr>
            <td>001</td>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>计算机科学与技术</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李四</td>
            <td>19</td>
            <td>女</td>
            <td>软件工程</td>
        </tr>
        <tr>
            <td>003</td>
            <td>王五</td>
            <td>18</td>
            <td>男</td>
            <td>数据科学与大数据技术</td>
        </tr>
    </table>
    
    <hr>
    
    <!-- 商品价格表 -->
    <h2>二、商品价格表</h2>
    <table border="1" width="60%" cellpadding="5" align="center">
        <caption>商品价格信息</caption>
        <tr>
            <th>商品编号</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
        <tr>
            <td>001</td>
            <td>笔记本电脑</td>
            <td>5999元</td>
            <td>50</td>
        </tr>
        <tr>
            <td>002</td>
            <td>智能手机</td>
            <td>3999元</td>
            <td>100</td>
        </tr>
        <tr>
            <td>003</td>
            <td>平板电脑</td>
            <td>2999元</td>
            <td>80</td>
        </tr>
    </table>
    
    <hr>
    
    <!-- 数据统计表格 -->
    <h2>三、数据统计表格</h2>
    <table border="1" width="80%" cellpadding="5">
        <caption>月度销售统计</caption>
        <tr>
            <th rowspan="2">产品</th>
            <th colspan="3">销售额</th>
        </tr>
        <tr>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
        </tr>
        <tr>
            <td>产品A</td>
            <td>10000</td>
            <td>12000</td>
            <td>15000</td>
        </tr>
        <tr>
            <td>产品B</td>
            <td>8000</td>
            <td>9000</td>
            <td>11000</td>
        </tr>
        <tr>
            <td>产品C</td>
            <td>5000</td>
            <td>6000</td>
            <td>8000</td>
        </tr>
    </table>
    
    <hr>
    
    <h2>表格样式建议</h2>
    <ul>
        <li>使用CSS设置表格样式，而不是HTML属性</li>
        <li>为表格添加适当的边框和间距</li>
        <li>使用`<caption>`标签为表格添加标题</li>
        <li>合理使用`rowspan`和`colspan`进行单元格合并</li>
        <li>确保表格的结构清晰，易于理解</li>
    </ul>
</body>
</html>

小结 ​

HTML表格标签是展示结构化数据的重要工具，通过合理使用 <table>、<tr>、<td>、<th> 等标签，可以创建各种类型的表格。同时，使用 rowspan 和 colspan 属性可以实现单元格的合并，创建更复杂的表格结构。在现代网页开发中，推荐使用CSS来设置表格样式，提升表格的美观度和可读性。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建