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>标签 ：定义表格的主体区域，包含核心数据行。

✅ 正确的结构关系：

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

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

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

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

html 复制代码

<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`	设置表格整体尺寸

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

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

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

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

html 复制代码

</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>。

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

html 复制代码

</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表格的使用。无论是初学者还是需要复习的开发者，都能从中获得实用价值。

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

一、表格基础标签

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

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

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

五、总结

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