CSS基础：table的4个标签的样式详解（6000字长文！附案例）

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

276篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

之前在 HTML 基础部分，我们讲解了表格的结构和写法HTML 表格的使用，收藏这1篇就够了！。简单回顾下。

  • <table> 包含 <thead>、<tbody>、<tfoot> 等表格部分。

  • <thead> 和 <tbody> 分别包含多个 <tr> 行。

  • <tr> 行中可以包含 <th> 或 <td> 单元格，用来显示表格的标题或数据。

本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。

图片

ok，那我们一起来看看这些表格标签的样式属性吧。

一、表格的样式属性

1. 设置表格边框

通过 CSS 的 border 属性可以设置表格的边框样式、宽度和颜色。例如：

table {border-collapse: collapse; /* 合并表格边框 */border: 1px solid #ccc; /* 设置表格边框样式和颜色 */
}

2. 设置表格外边距

可以使用 margin 属性CSS基础：margin属性4种值类型，4个写法规则详解来设置表格的外边距。例如：

table {margin: 20px; /* 设置表格外边距 */
}
、

3. 设置表格背景

使用 background 属性可以设置表格或单元格的背景。例如，设置颜色。

table {background-color: #f8f8f8; /* 设置表格背景颜色 */
}

4. 设置表格文本

使用 color，text-align，line-height，可以统一设置表格内文本的颜色，文字位置，行高等。例如：

table {color: #fff; /* 设置表格文字颜色 */text-align: center; /* 设置表格文字居中 */line-height: 40px; /* 设置表格行高 */
}

5. 设置表格的宽高

通过 CSS 的 width，height 属性可以设置表格的宽，高。例如：

table {width: 500px; /* 设置表格宽度 */height: 300px; /* 设置表格高度 */
}

设置表格的高度（height）会影响表格在页面中的布局和显示效果，具体影响有以下几点。

  1. 固定高度： 设置表格的高度可以使表格在垂直方向上占据固定的空间，这在需要确保表格在页面中占据特定高度的情况下非常有用，比如需要将表格设置为固定的侧边栏或者特定高度的数据展示区域。

  2. 内容溢出： 如果表格的高度设置不足以容纳其中的内容，内容可能会溢出表格，导致显示不完整或者被隐藏。这时可以通过设置表格容器的滚动条或者调整表格高度来解决溢出问题。比如，垂直方向的表格可以设置：overflow-y: auto;。

  3. 自适应高度： 如果表格的高度未设置或者设置为自适应（比如默认的 auto 值），表格会根据内容自动调整高度，保证内容完整显示，这在表格内容高度不确定或者动态变化的情况下非常实用。

总的来说，设置表格的高度可以根据实际布局需求来调整表格在页面中的显示效果，保证内容的完整展示并且符合页面整体布局。

下面是一个综合应用上述样式的示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>table {width: 80%;margin: 20px auto;border-collapse: collapse; /* 设置表格边框合并 */margin-top: 20px;border: 10px solid #1916e3;background: #c1c1df;color: #fff; /* 设置表格文字颜色 */text-align: center; /* 设置表格文字居中 */line-height: 40px; /* 设置表格行高 */}</style></head><body><table><thead><tr><th>学号</th><th>姓名</th><th>数学成绩</th><th>语文成绩</th><th>英语成绩</th></tr></thead><tbody><tr><td>1001</td><td>张三</td><td>85</td><td>78</td><td>92</td></tr><tr><td>1002</td><td>李四</td><td>92</td><td>87</td><td>88</td></tr><tr><td>1003</td><td>王五</td><td>78</td><td>80</td><td>85</td></tr>...可以多复制几行 tr ...</tbody></table></body>
</html>

效果如图：

图片

二、表头的样式属性

很多时候呢，表头的样式是要区别于表格的其他部分的。当为表头单元格设置特殊样式时，可以使用以下 CSS 属性：

  1. 背景（background）： 可以设置表头单元格的背景颜色或者增加 icon 图标，使其与其他单元格区分开来。

  2. 字体样式（font-style）： 可以设置表头单元格的字体样式，如斜体、粗体等，以突出表头信息。

  3. 对齐方式（text-align）： 可以设置表头单元格中文本的对齐方式，如左对齐、右对齐、居中对齐等，使表头内容排版更加整齐。

下面是代码，来看一下。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表格样式演示</title><style>table {width: 100%;border-collapse: collapse;}th {background-color: #007bff; /* 蓝色背景 */color: #fff; /* 白色字体 */font-weight: bold; /* 粗体字 */text-align: center; /* 居中对齐 */padding: 10px; /* 设置内边距 */}td {border: 1px solid #ccc; /* 设置边框 */padding: 10px; /* 设置内边距 */}</style></head><body><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></tbody></table></body>
</html>

效果如图：

图片

三、表格行样式属性

为表格的行设置样式可以通过 CSS 的伪类选择器来实现，常用的包括：

  1. 奇偶行样式（:nth-child）： 这个也叫作，斑马表格。可以通过给奇偶行<tr> 增加 CSS 样式，或者 :nth-child 伪类选择器为表格的奇偶行设置不同的样式，以增加表格的可读性。

  2. 鼠标悬停样式（:hover）： 可以使用 :hover 伪类选择器为鼠标悬停在行上时添加特定的样式，以提高表格的交互性。

以下是一个示例的 CSS 代码，演示了如何为表格的行设置奇偶行样式和鼠标悬停样式：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 表格样式 */table {width: 100%;border-collapse: collapse; /* 合并边框 */border: 1px solid #333;}th,td {border: 1px solid #333;}/* 奇偶行样式 */tr:nth-child(even) {background-color: #f2f2f2; /* 偶数行背景色 */}tr:nth-child(odd) {background-color: #fff; /* 奇数行背景色 */}/* 鼠标悬停样式 */tr:hover {background-color: #29ec8b; /* 鼠标悬停时背景色 */}</style></head><body><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td class="highlight">张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr><tr><td class="highlight">张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr><tr><td class="highlight">张三</td><td>25</td><td>男</td></tr>...(自己多复制几行 tr，不在这里写了，浪费空间。)</tbody></table></body>
</html>

效果如图：

图片

四、单元格的样式属性

  1. 背景（background）： 可以设置单元格的背景，使内容更加突出或与其他单元格区分开。但这个，通常会使用表格的背景或者表格行来设置单元格的背景，除非单元格样式和其他单元格的样式有不同，才会单独写样式。

  2. 边框样式（border）： 可以设置单元格的边框样式，如实线、虚线、点线等，用于区分单元格之间的边界。

  3. 文字样式（color、font-weight、font-style、text-align 等）： 可以设置单元格中文字的颜色、粗细、字体样式、对齐方式等，以使内容更加易读和美观。这个，通常不单独设置，通常会使用表格的文本样式或者表格行来设置单元格的文本样式，除非样式和其他单元格的样式有不同，才会单独写样式。

以下是代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>/* 表格样式 */table {width: 100%;border-collapse: collapse; /* 合并边框 */}/* 单元格样式 */td {color: #333; /* 白色文字 */border: 1px solid #ccc; /* 边框样式 */padding: 8px; /* 内边距 */text-align: right; /* 文字居右对齐 */}td.highlight {background-color: #ec638a; /* 特殊的红色背景 */color: #fff; /* 文字变成白色 */}</style></head><body><table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td class="highlight">张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></tbody></table></body>
</html>

效果如图：

图片

综合案例

那你可能会说，表格，表格行，和单元格都能设置背景，文字，行高，它们写在什么元素上最合理呢？我有以下 3 条建议，可做参考：

对于表格整体的样式，如背景色、边框等，可以直接在 table 元素上设置。

  1. 表格整体样式：

table {background-color: #f8f8f8; /* 设置表格背景色 */border-collapse: collapse; /* 合并表格边框 */border: 1px solid #ddd; /* 设置表格边框样式和颜色 */line-height: 30px; /* 设置表格行高 */
}

  1. 表头单元格样式：

    对于表格的表头单元格，可以使用 th 元素或指定的类选择器进行样式设置。

th {background-color: #333; /* 设置表头背景色 */color: #fff; /* 设置表头文字颜色 */text-align: center; /* 设置文字居中对齐 */
}

对于表格的行样式，如奇偶行背景色、鼠标悬停效果等，可以使用 tr 元素或指定的类选择器进行样式设置。

  1. 表格行样式：

tr:nth-child(even) {background-color: #f2f2f2; /* 偶数行背景色 */
}tr:nth-child(odd) {background-color: #fff; /* 奇数行背景色 */
}tr:hover {background-color: #ddd; /* 鼠标悬停时背景色 */
}

对于表格的单元格样式，如背景色、文字样式和行高等，可以使用 td 元素或指定的类选择器进行样式设置。

  1. 单元格样式：

td {padding: 10px; /* 设置单元格内边距 */text-align: center; /* 设置文字居中对齐 */line-height: 30px; /* 设置行高 */
}/* 设置特定类的单元格样式 */
.highlight-cell {background-color: #ffc; /* 设置单元格背景色 */font-weight: bold; /* 设置文字加粗 */color: #f00; /* 设置文字颜色 */
}

最后，咱们来一个综合应用的案例。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>学生成绩单</title><style>* {margin: 0;padding: 0;}table {width: 80%;margin: 30px auto; /* 让表格居中 */border-collapse: collapse;border: 2px solid #ddd; /* 整体边框颜色 */}th,td {line-height: 40px; /* 行高 */border: 1px solid #ddd; /* 每行边框 */text-align: center;font-size: 16px;}th {background-color: #007bff; /* 表头背景色 */color: #ffffff;}/* 这次奇偶行用 class 来写 */tr.even {background-color: #eee; /* 偶数行浅灰色 */}tr:hover {background-color: #ccc; /* 鼠标悬停时的背景色:蓝色 */}/* 把90分以上的要特殊标识绿色 */td.perfect {background-color: #00ff00; /* 绿色背景 */}</style></head><body><table><thead><tr><th>学号</th><th>姓名</th><th>数学成绩</th><th>语文成绩</th><th>英语成绩</th></tr></thead><tbody><tr><td>1001</td><td>张三</td><td>85</td><td>78</td><td class="perfect">98</td></tr><!-- 给2,4,6行数据，加上even(偶数)的class名称，做斑马条纹 --><tr class="even"><td>1002</td><td>李四</td><td class="perfect">92</td><td>87</td><td>88</td></tr><tr><td>1003</td><td>王五</td><td>78</td><td>80</td><td>85</td></tr><tr class="even"><td>1001</td><td>张三</td><td>85</td><td>78</td><td>92</td></tr><tr><td>1002</td><td>李四</td><td>89</td><td>87</td><td>88</td></tr><tr class="even"><td>1003</td><td>王五</td><td>78</td><td>80</td><td>85</td></tr><!-- 其他行以此类推 --></tbody></table></body>
</html>

效果如下。

图片

OK，本文完。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/856.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

记一次中间件宕机以后持续请求导致应用OOM的排查思路（server.max-http-header-size属性配置不当的严重后果）

记一次中间件宕机以后持续请求导致应用OOM的排查思路（server.max-http-header-size属性配置不当的严重后果）

一、背景 最近有一次在系统并发比较高的时候&#xff0c;数据库突然发生了故障&#xff0c;导致大量请求失败&#xff0c;在数据库宕机不久&#xff0c;通过应用日志可以看到系统发生了OOM。 二、排查 初次看到这个现象的时候&#xff0c;我还是有点懵逼的&#xff0c;数据库…
阅读更多...
项目二：学会使用python爬虫请求库（小白入门级）

项目二：学会使用python爬虫请求库（小白入门级）

上一章已经了解python爬虫的基本知识&#xff0c;这一次让我们一起来学会如何使用python请求库爬取目标网站的信息。当然这次爬虫之旅相信我能给你带来不一样的体验。 目录 一、安装requests 库 简介 安装 步骤 1.requests的基本使用3步骤 2.查看所使用编码 3.设置编码…
阅读更多...
Redis中BitMap在钉钉机器人中的应用

Redis中BitMap在钉钉机器人中的应用

性能分析 数据库中有1000w用户&#xff0c;每个用户签到一次&#xff0c;对应两个字段 连续签到多少次 、签到时间。 签到时间字段占用10个字节&#xff0c;连续签到多少天 占用5个字节&#xff08;假设一个用户能活100年&#xff0c;每天都签到&#xff0c;一个用户最多签到3…
阅读更多...
前端框架技术革新历程：从原生DOM操作、数据双向绑定到虚拟DOM等框架原理深度解析，Web开发与用户体验的共赢

前端框架技术革新历程：从原生DOM操作、数据双向绑定到虚拟DOM等框架原理深度解析，Web开发与用户体验的共赢

前端的发展与前端框架的发展相辅相成&#xff0c;形成了相互驱动、共同演进的关系。前端技术的进步不仅催生了前端框架的产生&#xff0c;也为其发展提供了源源不断的动力。 前端的发展 前端&#xff0c;即Web前端&#xff0c;是指在创建Web应用程序或网站过程中负责用户界面…
阅读更多...
使用Azure AI Search和LlamaIndex构建高级RAG应用

使用Azure AI Search和LlamaIndex构建高级RAG应用

RAG 是一种将公司信息合并到基于大型语言模型 &#xff08;LLM&#xff09; 的应用程序中的常用方法。借助 RAG&#xff0c;AI 应用程序可以近乎实时地访问最新信息&#xff0c;团队可以保持对其数据的控制。 在 RAG 中&#xff0c;您可以评估和修改各个阶段以改进结果&#x…
阅读更多...
2024年思维100春季线上赛今天开赛，来做历年真题700道感受下难度

2024年思维100春季线上赛今天开赛，来做历年真题700道感受下难度

今天是2024年4月20日&#xff0c;下午13点开始2024年春季思维100活动第一阶段的线上比赛就按年级正式开始了&#xff0c;先祝愿所有的参赛选手考出好成绩&#xff01; 这次没有参赛的孩子们也可以来做做历年的思维100真题&#xff0c;看看思维100考什么、怎么考、难度怎么样。如…
阅读更多...
ProgressFlowmon的confluence接口存在任意命令执行漏洞（CVE-2024-2389）

ProgressFlowmon的confluence接口存在任意命令执行漏洞（CVE-2024-2389）

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 ProgressFlowmon是一整套用于网络映射、应用程序性能…
阅读更多...
C++ | Leetcode C++题解之第29题两数相除

C++ | Leetcode C++题解之第29题两数相除

题目&#xff1a; 题解&#xff1a; class Solution { public:int divide(int dividend, int divisor) {// 考虑被除数为最小值的情况if (dividend INT_MIN) {if (divisor 1) {return INT_MIN;}if (divisor -1) {return INT_MAX;}}// 考虑除数为最小值的情况if (divisor I…
阅读更多...
【计算机组成原理】运算方法和运算器

【计算机组成原理】运算方法和运算器

数据与文字的表示方法 1. 数据格式1.1 定点数表示方法1.1.1 定点小数1.1.2 定点整数 1.2 浮点数表示方法1.2.1 浮点数表示1.2.2 浮点数的规格化1.2.2.1 尾数为原码表示的规格化1.2.2.2 尾数为补码表示的规格化 1.2.3 IEEE754标准⭐ 1.3 十进制数串的表示方法1.3.1 字符串形式1.…
阅读更多...
Tensorflow2.0笔记 - 使用卷积神经网络层做CIFA100数据集训练（类VGG13）

Tensorflow2.0笔记 - 使用卷积神经网络层做CIFA100数据集训练（类VGG13）

本笔记记录CNN做CIFAR100数据集的训练相关内容&#xff0c;代码中使用了类似VGG13的网络结构&#xff0c;做了两个Sequetial&#xff08;CNN和全连接层&#xff09;&#xff0c;没有用Flatten层而是用reshape操作做CNN和全连接层的中转操作。由于网络层次较深&#xff0c;参数量…
阅读更多...
centos搭建yum源

centos搭建yum源

目录 1.createrepo简介 2.repo搭建思路 3.安装 4.使用 1.createrepo简介 createrepo 是一个用于创建 RPM 包的工具&#xff0c;它可以帮助你创建一个本地的 YUM 仓库。createrepo 并不是用于运行 YUM 仓库服务的软件&#xff0c;而是用来生成仓库的元数据&#xff0c;使得…
阅读更多...
区分软件成熟度模型集成的五个等级

区分软件成熟度模型集成的五个等级

概念讲解 软件成熟度模型集成&#xff08;CMMI&#xff0c;Capability Maturity Model Integration&#xff09;是一种评估和改进软件开发过程的模型。CMMI的五个成熟度等级分别是&#xff1a; 初始级&#xff08;Level 1 - Initial&#xff09;&#xff1a;在这个等级&#x…
阅读更多...
【Taro3踩坑日记】找不到sass的类型定义文件

【Taro3踩坑日记】找不到sass的类型定义文件

问题截图如下&#xff1a;找不到sass的类型定义文件 解决办法&#xff1a; 1、npm i types/sass1.43.1 2、然后配置 TypeScript 编译选项&#xff1a;确保 TypeScript 编译器能够识别 Sass 文件&#xff0c;并正确处理它们。
阅读更多...
PyTorch的核心概念

PyTorch的核心概念

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…
阅读更多...
AWS账号注册以及Claude 3 模型使用教程!

AWS账号注册以及Claude 3 模型使用教程!

哈喽哈喽大家好呀&#xff0c;伙伴们&#xff01;你听说了吗&#xff1f;最近AWS托管了大热模型&#xff1a;Claude 3 Opus&#xff01;想要一探究竟吗&#xff1f;那就赶紧来注册AWS账号吧&#xff01;别担心&#xff0c;现在注册还免费呢&#xff01;而且在AWS上还有更多的大…
阅读更多...
【Linux】认识文件（一）：文件标识符

【Linux】认识文件（一）：文件标识符

【Linux】认识文件&#xff08;一&#xff09;&#xff1a;文件标识符 一.什么是文件&#xff1f;1.文件的本质2.文件的分类 二.访问文件操作1.C语言中的访问文件接口i.fopenii.fcloseiii.fwrite 2.系统访问文件接口i.openii.closeiii.write 三.文件管理1.对所有打开文件的管理…
阅读更多...
FlinkCDC基础篇章2-数据源 SqlServerCDC写入到ES中

FlinkCDC基础篇章2-数据源 SqlServerCDC写入到ES中

接着 上期FlinkCDC基础篇章1-安装使用 下载 Flink 和所需要的依赖包 # 下载 Flink 1.17.0 并将其解压至目录 flink-1.17.0 下载下面列出的依赖包&#xff0c;并将它们放到目录 flink-1.17.0/lib/ 下&#xff1a; 下载链接只对已发布的版本有效, SNAPSHOT 版本需要本地编译 …
阅读更多...
【分治】Leetcode 数组中的第K个最大元素

【分治】Leetcode 数组中的第K个最大元素

题目讲解 数组中的第K个最大元素 算法讲解 堆排序&#xff1a;1. 寻找最后一个节点的父亲&#xff0c;依次向上遍历&#xff0c;完成小堆的建立&#xff1b;2. 从最后一个元素开始&#xff0c;和堆顶的数据做交换&#xff0c;此时最小的数据在对后面&#xff0c;然后对剩下的…
阅读更多...
部署轻量级Gitea替代GitLab进行版本控制（一）

部署轻量级Gitea替代GitLab进行版本控制（一）

Gitea 是一款使用 Golang 编写的可自运营的代码管理工具。 Gitea Official Website gitea: Gitea的首要目标是创建一个极易安装&#xff0c;运行非常快速&#xff0c;安装和使用体验良好的自建 Git 服务。我们采用Go作为后端语言&#xff0c;这使我们只要生成一个可执行程序即…
阅读更多...
【React】Sigma.js框架网络图-入门篇

【React】Sigma.js框架网络图-入门篇

一、介绍 Sigma.js是一个专门用于图形绘制的JavaScript库。 它使在Web页面上发布网络变得容易&#xff0c;并允许开发人员将网络探索集成到丰富的Web应用程序中。 Sigma.js提供了许多内置功能&#xff0c;例如Canvas和WebGL渲染器或鼠标和触摸支持&#xff0c;以使用户在网页上…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023