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

news/2024/5/20 2:15:05

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 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.mrgr.cn/p/53335340

相关文章

JVM知识点总结二

JVM知识点总结二

参考文章&#xff1a;【Java面试题汇总】JVM篇&#xff08;2023版&#xff09;_jvm面试题2023-CSDN博客 1、说说你了解的JVM内存模型&#xff1a; JVM由三部分组成&#xff1a;类加载子系统、运行时数据区、执行引擎 JVM内存模型&#xff1a; 内存模型里的运行时数据区&#…
阅读更多...
汽车组装3D电子说明书更通俗易懂

汽车组装3D电子说明书更通俗易懂

激光打印机由于造价高、技术更先进&#xff0c;因此在使用和维护上需要更专业的手法&#xff0c;而对于普通客户来说并不具备专业操作激光打印机的技能&#xff0c;为了通俗易懂地让客户理解激光打印机&#xff0c;我们为企业定制了激光打印机3D产品说明书&#xff0c;将为您带…
阅读更多...
计算机（电脑）硬件组成基本介绍4

计算机（电脑）硬件组成基本介绍4

详细介绍的计算机（电脑）硬件组成.电源插座为主板提供供电的电源接口目前，主板电源接口插座主要采用ATX电源接口， ATX电源接口一般为24针电源插座、8 针电源插座、4针电源插座等，主要为主板提供5V、 12V、3.3V 电压等. ATX 电源都支持软件关机功能。目前，双核CPU 主板上的…
阅读更多...
Git学习路线

Git学习路线

1.看书 把这本书看懂就可以了&#xff1b;这个是比较专业的一本书&#xff1b;比较系统&#xff1b;没有书的可以私信我 2.理解Git多个分区和多个分支 多个分区包括&#xff1a;工作区、暂存区、本地仓、本地的远端仓信息、远端仓 多个分区的状态 分支及其变化 3.记住常用命令…
阅读更多...
计算机（电脑）硬件组成基本介绍3

计算机（电脑）硬件组成基本介绍3

详细介绍的计算机（电脑）硬件组成.重要接口SATA连接大容量存储设备的SATA接口SATA （Serial ATA）接口即串行ATA，它是目前硬盘采用的一种新型的接口类型。SATA接口主要采用连续串行的方式传输数据，这样在同一时间点内只会有1位数据传输，此做法能减小接口的针脚数目，用4个针…
阅读更多...
机器学习-保险花销预测笔记+代码

机器学习-保险花销预测笔记+代码

读取数据 import numpy as np import pandas as pddatapd.read_csv(rD:\人工智能\python视频\机器学习\5--机器学习-线性回归\5--Lasso回归_Ridge回归_多项式回归\insurance.csv,sep,) data.head(n6) EDA 数据探索 import matplotlib.pyplot as plt %matplotlib inlineplt.hi…
阅读更多...
计算机（电脑）硬件组成基本介绍1

计算机（电脑）硬件组成基本介绍1

详细介绍的计算机（电脑）硬件组成。目录目录操作系统与硬件及应用程序软件的关系电脑各个设备之间关系 如何评价一台电脑? 通过CPU型号看性能 通过 CPU 主频评价 通过内存容量评价 通过显卡芯片及显存容量评价 通过显示器评价 中央处理器 存储器 输入设备 输出设备 接口…
阅读更多...
20.Nacos集群搭建

20.Nacos集群搭建

模拟Nacos三个节点&#xff0c;同一个ip,启动三个不同的端口&#xff1a; 节点 nacos1, 端口&#xff1a;8845 节点 nacos2, 端口&#xff1a;8846 节点 nacos3, 端口&#xff1a;8847 1.搭建数据库&#xff0c;初始化数据库表结构 这里我们以单点的数据库为例 首先新建一…
阅读更多...
DC学习笔记

DC学习笔记

视频 数字逻辑综合工具实践 DC 01_哔哩哔哩_bilibili 一、DC工作模式&#xff08;此小节为搬运内容&#xff09; 原链接&#xff1a;Design_Compiler User Guide 随手笔记&#xff08;9&#xff09;Using Floorplan Information - 知乎 DC拥有四种工作模式&#xff1a; 工…
阅读更多...
Ubuntu24.04系统Docker安装nextcloud+onlyoffice

Ubuntu24.04系统Docker安装nextcloud+onlyoffice

1.Ubuntu系统下载 Ubuntu镜像站大全 我用的是山东大学的镜像站 我下的是desktop版本就是有GUI图形界面，如果不需要可以下载server版本2.开启SSH启用root用户远程登陆 由于我使用远程工具MobaXterm进行连接，所以安装完系统后需要开启SSH，如果你不需要使用远程工具远程可以跳过…
阅读更多...
18种WEB常见漏洞：揭秘网络安全的薄弱点

18种WEB常见漏洞：揭秘网络安全的薄弱点

输入验证漏洞: 认证和会话管理漏洞: 安全配置错误: 其他漏洞: 防范措施: Web 应用程序是现代互联网的核心&#xff0c;但它们也容易受到各种安全漏洞的影响。了解常见的 Web 漏洞类型&#xff0c;对于开发人员、安全测试人员和普通用户都至关重要。以下将介绍 18 种常见的 …
阅读更多...
C语言--基础面试真题

C语言--基础面试真题

1、局部变量和静态变量的区别 普通局部变量和静态局部变量区别 存储位置&#xff1a; 普通局部变量存储在栈上 静态局部变量存储在静态存储区 生命周期&#xff1a; 当函数执行完毕时&#xff0c;普通局部变量会被销毁 静态局部变量的生命周期则是整个程序运行期间&#…
阅读更多...
学习Rust第14天：HashMaps

学习Rust第14天：HashMaps

今天我们来看看Rust中的hashmaps&#xff0c;在 std::collections crate中可用&#xff0c;是存储键值对的有效数据结构。本文介绍了创建、插入、访问、更新和迭代散列表等基本操作。通过一个计算单词出现次数的实际例子&#xff0c;我们展示了它们在现实世界中的实用性。Hashm…
阅读更多...
基于harris角点和RANSAC算法的图像拼接matlab仿真

基于harris角点和RANSAC算法的图像拼接matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 ....................................................................... I1_harris fu…
阅读更多...
对EKS（AWS云k8s）启用AMP（AWS云Prometheus）监控+AMG(AWS云 grafana)

对EKS（AWS云k8s）启用AMP（AWS云Prometheus）监控+AMG(AWS云 grafana)

问题 需要在针对已有的EKS k8s集群启用Prometheus指标监控。而且&#xff0c;这里使用AMP即AWS云的Prometheus托管服务。好像这个服务&#xff0c;只有AWS国际云才有&#xff0c;AWS中国云没得这个托管服务。下面&#xff0c;我们就来尝试在已有的EKS集群上面启用AMP监控。 步…
阅读更多...
IP地址定位：揭秘精准定位的技术与应用

IP地址定位：揭秘精准定位的技术与应用

在数字化时代&#xff0c;IP地址已成为连接互联网世界的关键标识之一。但是&#xff0c;很多人对于IP地址的精准定位能力存在疑虑。本文将深入探讨IP地址定位的技术原理以及其在实际应用中的精确度。 IP地址查询&#xff1a;IP数据云 - 免费IP地址查询 - 全球IP地址定位平台 …
阅读更多...
运行游戏提示dll文件丢失，分享多种有效的解决方法

运行游戏提示dll文件丢失，分享多种有效的解决方法

在我们日常频繁地利用电脑进行娱乐活动&#xff0c;特别是畅玩各类精彩纷呈的电子游戏时&#xff0c;常常会遭遇一个令人困扰的问题。当我们满怀期待地双击图标启动心仪的游戏程序&#xff0c;准备全身心投入虚拟世界时&#xff0c;屏幕上却赫然弹出一条醒目的错误提示信息&…
阅读更多...
xgp加速器免费 微软商店xgp用什么加速器

xgp加速器免费 微软商店xgp用什么加速器

2001年11月14日深夜&#xff0c;比尔盖茨亲自来到时代广场&#xff0c;在午夜时分将第一台Xbox交给了来自新泽西的20岁年轻人爱德华格拉克曼&#xff0c;后者在回忆中说&#xff1a;“比尔盖茨就是上帝。”性能超越顶级PC的Xbox让他们趋之若鹜。2000年3月10日&#xff0c;微软宣…
阅读更多...
链游：未来游戏发展的新风向

链游：未来游戏发展的新风向

链游&#xff0c;即区块链游戏的一种&#xff0c;是一种将区块链技术与游戏玩法相结合的创新型游戏。它利用区块链技术的特性&#xff0c;如去中心化、可追溯性和安全性&#xff0c;为玩家提供了一种全新的游戏体验。链游通常采用智能合约来实现游戏的规则和交易系统&#xff0…
阅读更多...
Oracle delete删除数据是否为逻辑删除、新插入数据占用的数据块位置实验

Oracle delete删除数据是否为逻辑删除、新插入数据占用的数据块位置实验

假设一&#xff1a;数据库delete删除为直接删除 假设二&#xff1a;数据库delete删除为逻辑删除&#xff0c;在数据块标记出来&#xff0c;但是实际并没有删除。 方式一&#xff1a;通过dump数据块的方式来实现 我们先用小数据量&#xff0c;通过dump数据块的方式来实现 -- 数…
阅读更多...
推荐文章

Copyright @ 2022~2023