点此查看 所有教程、项目、源码导航
本文目录
- 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)–表格样式
发布评论