零基础CSS入门教程(17)–表格样式
点此查看 所有教程、项目、源码导航
本文目录
- 1. 题外话
- 2. 前言
- 3. HTML表格边框
- 4. CSS设定表格边框
- 5. 设定列边框
- 6. 折叠边框
- 7. 表格尺寸
- 8. 表格内边距
- 9. 表格背景色
- 10. 小结
1. 题外话
不知不觉，写到第40篇了。
可能已经是我写过的最长的系列文章了，虽然质量有时比较好，有时比较差，但我总体对该系列文章比较满意。
因为它寄托了我的心思，也帮我在达成目标的路上，一点一滴的前进。
如果说目标是什么，就是为热爱计算机专业、热爱计算机技术的初学者，特别是我的学生，提供一个渠道。我们在这条道路上，一同探索、一同前进、一同成长。
这就是为人师者，不忘初心的探索吧。
所以，这条学习之路，没有尽头，会有JavaWeb学习之路，也会有Python学习之路。会有前端学习之路，也会有数据库学习之路。
40篇的时候，一点小的感想，每一个一小步，都是一大步的积累。
2. 前言
本篇来介绍下，表格常用的那些CSS样式编写方法，使用的CSS代码其实之前基本都已经接触过了，本篇也算是对之前的CSS章节的应用演示。
3. HTML表格边框
在HTML教程部分，我们曾经使用border属性设定表格，代码如下：
<table border="1"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
其实这种方式，是不推荐使用的。因为网页设计遵循的原则，还是HTML表示内容，而CSS进行样式描述。
对于表格来说，表格的内容就是行列里的文字，而边框属于对表格外观的美化，属于样式部分，所以更适合用CSS描述。
4. CSS设定表格边框
之前我们已经学习过CSS之边框的设定方法了，所以可以利用CSS的border来为表格设定边框，代码如下：
设定表格边框：<table class="table-border"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
对应CSS代码：
.table-border {border: 1px solid black;}
我们为表格设定了宽度1px、实线、黑色的边框，所以效果如下：
5. 设定列边框
在上面的例子中，表格外围是有了边框了，但是各列之间并未有边框区分。实际大多数情况下，我们希望列也有表格边框，可以如下设定：
同时设定列边框:<table class="table-col-border"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
CSS代码：
.table-col-border th,.table-col-border td {border: 1px solid black;}
我们利用嵌套选择器、分组选择器，设定了.table-col-border内部th和td元素的CSS样式，所以效果如下：
6. 折叠边框
在上图中，表格具备双边边框，看起来奇奇怪怪的。这是因为th、td标签设置了独立的边框。
如果想让边框折叠为一条，可以使用border-collapse属性实现：
折叠边框：<table class="table-collapse"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
CSS代码：
.table-collapse {border-collapse: collapse;}.table-collapse th,.table-collapse td {border: 1px solid black;}
在上面的代码中，我们对表格应用了border-collapse: collapse;样式代码，所以表格被折叠，效果如下：
7. 表格尺寸
再看上面的表格，尺寸太小了，看着就憋屈。我们可以使用之前学习的width、height修改表格的尺寸。
表格尺寸：<table class="table-size"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
CSS代码：
.table-size {border-collapse: collapse;width: 400px;height: 100px;}.table-size th,.table-size td {border: 1px solid black;}
指定高度、宽度后效果如下：
8. 表格内边距
表格尺寸增大后，看起来舒服多了。但是行列的内容与边框靠的太近，还是不够美观，此时我们可以利用padding设定表格的内边距。
表格的内边距：<table class="table-padding"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
CSS代码：
.table-padding {border-collapse: collapse;width: 400px;height: 100px;}.table-padding th,.table-padding td {width: 200px;border: 1px solid black;padding: 10px;}
在上面的代码中，我们将th、td的内边距设为10个像素，所以表格行列里面的文字与行列边框之间，会有10px的距离，效果如下：
9. 表格背景色
通常情况下，我们希望让表格的标题栏具备一个特殊的背景色，这样看起来会区分度更强。
表格背景色：<table class="table-back"><thead><th>姓名</th><th>性别</th></thead><tbody><tr><td>张三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody></table>
CSS代码：
.table-back {border-collapse: collapse;width: 400px;height: 100px;}.table-back th,.table-back td {width: 200px;border: 1px solid black;padding: 10px;}.table-back th {background-color: green;color: white;}
我们为表格的标题栏，设定了绿色背景，同时将文字调为白色，所以效果如下：
此时表格已经比较美观了，大功告成！
10. 小结
本篇介绍了表格基本的、常用的样式描述方法。
设计使用过程中，可以根据网站整体风格，设计表格的具体样式。
零基础CSS入门教程(17)–表格样式相关推荐
- 零基础CSS入门教程(13)–边框样式
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 边框的样式 3. 边框宽度 4. 边框颜色 5. 简写属性 6. 单独设定各边样式 7. 小结 1. 前言 边框是使用频率很高的样式,图 ...
- 零基础CSS入门教程(5)–背景样式
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 设置背景色 3. 设置背景图片 4. 背景图平铺 4.1 不平铺 4.2 水平平铺 4.3 垂直平铺 4.4 两个方向平铺 5. 背景定 ...
- 零基础CSS入门教程(1)–初识CSS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言 学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
- 零基础CSS入门教程(11)——无序列表样式
本章目录 1.任务目标 2.无序列表样式 3.代码如下 4.小结 1.任务目标 我们再html里面有无序列表和有序列表,那我们这一小节学习一下列表样式,并熟练掌握. 2.无序列表样式 (1)list- ...
- 零基础CSS入门教程(19)–盒子模型简述
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言 之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...
- 零基础CSS入门教程(22)–溢出
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 默认显示溢出部分 3. 隐藏溢出部分 4. 显示滚动条 5. 自动处理 6. 小结 1. 前言 之前我们讲过了,网页元素会占据一个盒子的 ...
- 零基础CSS入门教程(16)–内边距
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 默认情况 3. 设置内边距 4. 简写属性 5. 小结 1. 前言 上一篇介绍了外边距,也就是元素跟相邻元素的距离. 本篇来介绍内边距, ...
- 零基础CSS入门教程(6)–style标签与注释
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. style标签 3. CSS注释 4. HTML注释与CSS注释的区别 5. 小结 1. 前言 特别喜欢毛主席的一些文章,例如<论 ...
- 零基础CSS入门教程(9)–class选择器
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 场景 3. 使用方法 4. 整体解析 5. class选择器的优点 6. 小结 1. 前言 前2篇文章分别介绍了元素选择器.id选择器, ...
- 零基础CSS入门教程(8)–id选择器
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. id选择器 3. 使用id选择器 4. 整体网页解析 5. 小结 1. 前言 上一篇介绍了元素选择的使用,本篇来介绍一种新的选择器:id ...
最新文章
- Vue生命周期函数详解
- BASE64 编码和解码
- 在docker中安装RabbitMQ
- 信息学奥赛一本通（C++）在线评测系统——基础（一）C++语言—— 1061：求整数的和与均值
- 改变世界的5大常数，学过数学的人，这一辈子都不会忘记！
- 关于div+css布局值得注意的地方
- 彻底搞懂Android文件存储---内部存储，外部存储以及各种存储路径解惑
- 多边形的定义为什么要强调封闭图形_多边形的定义及其定理
- 利用Oracle RDA（ Remote Diagnostic Agent）快速收集Oracle产品分析数据
- C++(18)——温度表达转化
- iOS高德地图路径选择
- kaldi 学习笔记-三音素训练1(Decision Tree)
- linux 类似winscp_什么是类似于WinSCP的程序？
- 通用产品 云OA SaaS三管齐下
- 魔兽争霸兽族打疯狂不死
- Person [id=1, p_name=null, age=29, sex=女, idCard=IdCard [id=1, code=123453188908572121]]
- 赛车游戏中赛车的物理建模
- SVN远程主机强迫关闭了一个现有的连接解决办法
- [IOS] iOS开发学习的站点
- 聚焦2021年‘人工智能’产业三大发展趋势有哪些？