HTML- table表格的使用，常见表格标签的使用汇总，表格合并规则，跨行合并与跨列合并

客官°小女子只卖身不卖艺 2023-08-17 15:22 120阅读 0赞

以前表格主要是用来布局、显示数据，随着技术的更新迭代表格布局逐渐被淘汰，现多用于展示数据

表格通过 `table` 标签来定义，一个完整的表格包含表格的 `caption`（标题）、`tr`（行）、`td`（列）、`thead`（表头）、`th`（表头单元格）、`tbody`（主体内容）、`tfoot`（表格页脚）

#### 各个标签的作用 ####

*  `table` 用于定义表格
 *  `caption` 定义表格的标题，属于表格的一部分，写在表格标签的内部，使用该标签时必须放在 table 标签的第一个子标签位置（紧随 table 标签），标题中的内容默认在表格中居中显示
 *  `thead` 用于定义表格中的表头部分
 *  `th` 写在表头的内部，用来定义表头单元格，主要通过数据的性质进行数据分类，写在该标签中的内容默认会加粗、居中
 *  `tbody` 表格的主体部分，用来包裹 `tr`、`td` 标签，该标签未设置时浏览器会默认创建
 *  `tr` 定义表格的行，一个表格可以有多行，每行可以有多列，只有定义了行才能定义列
 *  `td` 表格单元格，用来定义列，数据就是放在该标签中，数据默认左对齐
 *  `tfoot` 定义表格的页脚，一般放在表格的底部

#### 表格基本结构、默认效果 ####

![在这里插入图片描述][201909261000516.png]

#### 各个标签常见的属性（控制样式的属性一般使用 CSS 来设置） ####

##### `<table></table>` 标签 #####

*  `width` 设置表格的宽度
 *  `height` 设置表格的高（一般不设置）
 *  `border` 设置表格的边框，不包含表格的标题部分
 *  `align` 整个表格在网页中的对齐方式；left（左对齐）、center（居中对齐）、right（右对齐）
 *  `cellpadding` 用于设置单元格中的内容与单元格边沿的距离（四周）
 *  `cellspacing` 设置单元格之间的距离（四周）
 *  `rules` 设置表格的**单元格边框**是否可见；none （不可见）、all（显示行列之间的线条，非行列之间的线条不显示）、rows（显示行与行之间的边框）、cols（显示列于列之间的线条）
 *  `bgcolor` 设置整个表格的背景色（不包含表哥格标题部分）

###### 设置了 width、border、align 后效果 ######

![在这里插入图片描述][20190926111843973.png]

###### 继续设置了 bgcolor、cellpadding 后的效果 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

###### 继续设置了 cellspacing、rules 后的效果 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

##### `<caption></caption>` 标签 #####

*  `align` 标题内容的对齐方式，默认居中对齐，该属性 HTML5 中已废弃；left（左对齐）、right（右对齐）、top（上对齐）、bottom（底部对齐）

##### `<thead></thead>` 标签 #####

*  `align` 用于设置 `thead` 标签中内容的水平对齐方式；left、center、right、justify（两端对齐）
 *  `valign` 设置 `thead` 元素中内容的垂直对齐方式；top、middle（居中）、bottom、baseline（基线对齐）

##### `<tr></tr>` 标签 #####

*  `height` 设置整行的高度
 *  `bgcolor` 设置整行的背景色
 *  `align`、`valign`

<tbody>
      <tr height="60" align="center" bgcolor="yellow">
        <td>小小</td>
        <td>girl</td>
        <td>19</td>
      </tr>
    </tbody>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]

##### `<td></td>` 标签 #####

*  `width` 设置单元格的宽度，如果设置了某个单元格的宽度则整个列的宽度都会随之改变
 *  `height` 设置单元格的高度，如果设置了某个单元格的高度则整个行的宽度都会随之改变
 *  `colspan` 跨列合并（从左往右水平合并）单元格，属性值为数值类型
 *  `rowspan` 跨行合并（从上往下垂直合并）单元格
 *  `bgcolor`、`align`、`valign`

###### 合并单元格规则： ######

*  根据先上后下 ，先左后右的原则找到目标单元格，然后设置合并方式还有合并的单元格数量；
 *  `colspan="n"` 跨列合并时，删除 **设置了** 单元格合并属性的右侧对应的 n-1 个单元格
 *  `rowspan="n"` 跨行合并时，删除 **设置了** 单元格合并属性的下方共 n-1 行（对应的每行都要删）对应位置的一个单元格
    
     *  例如 `rowspan="3"` 则删除下两行中对应位置的一个单元格

###### 跨列合并示例： ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]  
实现思路：在第二行第一列中设置 `colspan="2"`，删除第二行第二列这个单元格

代码：

效果：  
![在这里插入图片描述][20190926174738394.png]

###### 跨行合并示例： ######

![在这里插入图片描述][20190926192146546.png]  
实现思路：在第二行第三列中设置 `rowspan="2"`，删除第三行第三列这个单元格

代码：

<caption>表格标题</caption>
    
    <thead>
      <tr>
        
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
      </tr>
    </thead>
    
    
    <tbody>
      <tr>
        <td>小小</td>
        <td>girl</td>
        
        <td rowspan="2">19</td>
      </tr>
      <tr>
        <td>小小</td>
        <td>girl</td>
        
      </tr>
    </tbody>
    </table>

效果：  
![在这里插入图片描述][20190926192525424.png]

##### `<th></th>` 标签 #####

*  `width`、`height` 、 `bgcolor` 、`colspan`、`rowspan`

##### `<tbody></tbody>` 标签 #####

*  `align`、`valign`

##### `<tfoot></tfoot>` 标签 #####

*  `align`、`valign`

实现下图效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]  
代码：

[201909261000516.png]: /images/20230810/9027ff98b8004037afc6d40b98fb5444.png
[20190926111843973.png]: /images/20230810/d3b2cf06e2da4c30a484feb8855448e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230810/519ec6331e5440cea10ca586f7b521c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230810/ed8c0c11d9bb413bb03df54d4b321d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: /images/20230810/88e5dae90aad482ab30e7c5e9204c4ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: /images/20230810/aca81ccf39e44261bd6056b8733d0106.png
[20190926174738394.png]: /images/20230810/8add2b9b40574ab698e7eea58d4ed9c7.png
[20190926192146546.png]: /images/20230810/fcd27b4fc05946a2a7c807f8a28dea24.png
[20190926192525424.png]: /images/20230810/9fc3ebd52ffa41859d05825121b3d91b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 4]: /images/20230810/4fde9e4e04e44ad1a5332aa7029015e5.png