点此查看 所有教程、项目、源码导航

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. 小结

本篇介绍了表格基本的、常用的样式描述方法。

设计使用过程中，可以根据网站整体风格，设计表格的具体样式。