2.HTML表格详解：标签、属性与单元格合并实战

目录

一、表格基础标签

二、表格常用属性（推荐使用CSS替代）

[三、表格标签基本使用 01 ------](#三、表格标签基本使用 01 ——)

标签实战

[四、表格标签基本使用 02 ------ 表格头部 + 表格主体 + 单元格合并](#四、表格标签基本使用 02 —— 表格头部 + 表格主体 + 单元格合并)

五、总结

---

在Web开发中，HTML表格是展示结构化数据的重要工具。本文将结合详细的图文教程，从基础标签到高级合并技巧，全面解析HTML表格的使用方法，确保你掌握每一个细节。

---

一、表格基础标签

HTML表格由一系列标签构成，每个标签都有明确的职责：

• <table>标签：表示整个表格的容器。

• <tr>标签：表示表格中的一行（Table Row）。

• <td>标签：表示一个标准的数据单元格（Table Data）。

• <th>标签 ：表示一个表头单元格（Table Header），默认会居中加粗显示。

• <thead>标签 ：定义表格的头部区域 ，通常用于包裹标题行（<tr>containing <th>）。

• <tbody>标签 ：定义表格的主体区域，包含核心数据行。

✅ 正确的结构关系：

1. <table>包含 <thead>, <tbody>, <tfoot>。

2. <thead>或 <tbody>包含 <tr>。

3. <tr>包含 <th>或 <td>。

为了更直观地理解，可以参考以下结构图：

<table>
  <thead> <!-- 表格头部 -->
    <tr>   <!-- 第一行（标题行） -->
      <th>姓名</th> <!-- 标题单元格 -->
      <th>年龄</th>
    </tr>
  </thead>
  <tbody> <!-- 表格主体 -->
    <tr>   <!-- 数据行 -->
      <td>张三</td> <!-- 数据单元格 -->
      <td>20</td>
    </tr>
  </tbody>
</table>

---

二、表格常用属性（推荐使用CSS替代）

虽然现代前端开发更推荐使用CSS来设置样式，但了解HTML原生属性仍有助于理解表格结构。这些属性需放在++<table>++标签内：

属性名	说明
align	表格相对于周围元素的对齐方式。align="center"表示居中（非内部元素对齐）
border	边框宽度。1表示有边框，数字越大越粗，""表示无边框
cellpadding	单元格内容与边框的距离，默认1像素
cellspacing	单元格之间的距离，默认为2像素
width/ height	设置表格整体尺寸

1. Alt+Shift+⬇️：快速复制代码到下一行

2. align控制的是表格整体的位置，与表格内容无关

---

三、表格标签基本使用 01 ------ <table>标签实战

下面是一个完整的基础表格示例，包含姓名、性别、年龄三列：

</head>
<body>
    <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>3</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>4</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>5</td>
        </tr>
    
</body>
</html>

💡 提示 ：align控制的是表格整体的位置，与表格内部内容无关。

---

四、表格标签基本使用 02 ------ 表格头部 + 表格主体 + 单元格合并

为了后续使用CSS设置样式更方便，我们通常会将表格结构分为<thead>和<tbody>。

完成如下需求：将左侧的表格的一些单元格进行合并：

</head>
<body>
    <table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>张三</td>
                <td rowspan="2">男</td>
                <td>3</td>
            </tr>
            <tr>
                <td>李四</td>
                <!-- <td>男</td> -->
                <td>4</td>
            </tr>
            <tr>
                <td colspan="2">王五/女</td>
                <!-- <td>女</td> -->
                <td>5</td>
            </tr>
        </tbody>
</body>
</html>

💡 注意：合并后，被合并的单元格在代码中需删除或注释掉，避免重复渲染。

---

五、总结

本文从最基础的表格标签讲起，逐步深入到结构划分、属性设置、单元格合并，配合完整代码示例和效果图，帮助你彻底掌握HTML表格的使用。无论是初学者还是需要复习的开发者，都能从中获得实用价值。