HTML + CSS 连载 | 32 - HTML 表格与结构伪类

于 2023-10-31 22:09:16 发布
阅读量52 收藏
点赞数
分类专栏： HTML2CSS 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JingnanJia/article/details/134131306
版权

html+css.jpeg

一、单元格合并与结构伪类

在了解了基本的表格元素的使用和单元格的合并后，我们可以尝试实现一下这个计划表：

image.png

这个计划表中不仅包含了行合并和列合并，每行交替使用不同的背景色，这需要使用结构伪类来实现。

基本结构搭建与样式设置

首先创建一个 12*6 的表格，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <table>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
      <tr>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
        <td>开会</td>
      </tr>
    </table>
  </div>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

只包含了具体的主题信息，接下来进行样式的设置，添加如下 CSS 代码：

div {
  background-color: #55bfc6;
  width: 720px;
  /*设置表格居中*/
  margin: 0 auto;
}

table {
  /*合并单元格边框线*/
  border-collapse: collapse;
  /*设置单元格内文字居中*/
  text-align: center;
}

td {
  /*设置单元格边框线*/
  border: 1px solid white;
  width: 120px;
  height: 40px;
  color: #050a0e;
}

刷新 HTML 页面，效果如下：

image.png

可以看到背景颜色、边框线以及文字居中等样式成功设置。

跨行跨列合并

需求中有跨行合并的情况分别是，第二行的第一列与第三四五行的第一列合并，以及第七行的第一列与第八九十行的第一列合并，使用 rowspan 合并行，并删除多余的数据，具体 HTML 代码如下：

<table>
  <tr>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第二行的第一列 -->
    <td rowspan="4">开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第三行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第四行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第五行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第七行第一列，与第八九十行的第一列合并 -->
    <td rowspan="4">开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第八行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第九行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第十行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
</table>

刷新页面，效果如下：

image.png

可以看到行合并成功。

接下来是列的合并，分别是第六行的第一二三四五六列合并、第十一行的第二三四五六列合并，以及第十二行的第二三四五六列合并；具体的 HTML 代码如下：

<table>
  <tr>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第二行的第一列 -->
    <td rowspan="4">开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第三行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第四行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第五行的第一列与第二行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第六行的第一二三四五六列合并 -->
    <td colspan="6">开会</td>
    <!-- <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td> -->
  </tr>
  <tr>
    <!-- 第七行第一列，与第八九十行的第一列合并 -->
    <td rowspan="4">开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第八行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第九行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <!-- 第十行的第一列与第七行第一列合并 -->
    <!-- <td>开会</td> -->
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td>
  </tr>
  <tr>
    <td>开会</td>
    <!-- 第十一行的第二三四五六列合并 -->
    <td colspan="5">开会</td>
    <!-- <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td> -->
  </tr>
  <tr>
    <td>开会</td>
    <!-- 第十二行的第二三四五六列合并 -->
    <td colspan="5">开会</td>
    <!-- <td>开会</td>
    <td>开会</td>
    <td>开会</td>
    <td>开会</td> -->
  </tr>
</table>

刷新 HTML 页面，效果如下：

image.png

列也已经成功合并。

样式调整

修改表格 header 内容，将第一行中的 td 改为 th，并设置字体为白色，其他行的字体颜色设置为黑色，具体 CSS 代码如下：

tr > th {
  border: 1px solid white;
  width: 120px;
  height: 40px;
  color: white;
}

tr > td {
  border: 1px solid white;
  width: 120px;
  height: 40px;
  color: #050a0e;
}

刷新页面，效果如下：

image.png

我们可以使用结构伪类设置表主体每一行交替变化的背景色，:nth-child(2n+2) 表示结构伪类，选中子元素进行样式的设置，而 2n+2 表示对第一个子元素进行设置，n 是从 0 开始的。

设置如下 CSS 样式，从第二行开始交替设置不同的背景色：

table tr:nth-child(2n + 2) {
  background-color: #aae1e3;
}

table tr:nth-child(2n + 3) {
  background-color: #d4eff2;
}

刷新页面，具体效果如下：

image.png

Riemann Hypothesis
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值