HTML（四）——HTML标签（四）——HTML基本标签之表格标签（二）

最新推荐文章于 2023-08-06 15:37:01 发布

柚子喵cc

最新推荐文章于 2023-08-06 15:37:01 发布

阅读量427

点赞数

分类专栏：前端学习笔记文章标签： html 前端 vscode

本文链接：https://blog.csdn.net/m0_45278598/article/details/122474964

版权

前端学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

表格结构标签

1 使用场景

表格可能很长，为了更好地表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。

2 语法表达

在表格标签中，分别用：

<thead></thead>——定义表格的头部区域——<thead>内部必须拥有<tr>标签。一般是位于第一行。
<tbody></tbody>——定义表格的主体——主要用于放数据本体。
以上标签都是放在<table></table>标签中

合并单元格

特殊情况下，可以把多个单元格合并为一个单元格

1. 合并单元格方式

跨行合并

rowspan = "合并单元格的个数"

跨列合并

colspan = "合并单元格的个数"

2. 目标单元格

写合并代码

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

3. 合并单元格的步骤

三步曲：

先确定是跨行还是跨列合并。
找到目标单元格，写上合并方式 = 合并的单元格数量。
删除多余的单元格。

代码实现

<!--
 * @Description: This is about merge cells tag.
 * @Version: 1.0
 * @Author: Pomelocc0302
 * @Date: 2022-01-15 12:21:58
 * @LastEditors: Pomelocc0302
 * @LastEditTime: 2022-01-15 12:27:50
-->
<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>16- Merge Cells Tag</title>
</head>
<body>
      <table width="500" height="249" border="1" cellspacing="0">
            <tr>
                  <td></td>
                  <td colspan="2"></td>
            </tr>
            <tr>
                  <td rowspan="2"></td>
                  <td></td>
                  <td></td>
            </tr>
            <tr>
                  <td></td>
                  <td></td>
            </tr>
      </table>
</body>
</html>