在CSS技术的发展过程中，有一组CSS属性是专门用来调整表格外观的，这组属性的主要功能是从表象的层面替代HTML中表格的原始属性。由于表格布局大势已去，因此表格的利用率大大的降低了。但是在一些管理系统的后台界面中，大量数据的展示依然需要依靠表格。今天，小海前端（头条号）就来为大家讲一讲CSS技术中这几个与表格有关的样式属性。

承接文章：不使用浮动属性，看CSS3如何实现多列布局，新技术解决大问题

技术等级：中级 | 适合有一定的CSS基础的人士阅读。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

本篇文章将涉及到下列CSS属性：

table-layout

border-collapse

border-spacing

caption-side

empty-cells

一、利用CSS技术展示表格的边框：

我们都知道，HTML中的<table></table>标记对具备border属性，该属性的添加可以让整个表格具备外边框和单元格边框。CSS技术本着对象与表象相分离的原则，不使用border这个HTML属性也可以为表格添加外边框和单元格边框。方法如下所示：

1、为table标记对施加下列属性：

table{border:solid 1px #ff5857;}

上述代码只能为整个表格实现四个方向的外边框。

2、为th和td标记对施加下列属性：

th,td{border:solid 1px #ff5857;}

上述代码可以为表格实现每一个单元格的单元格边框。

最终的效果如下图所示。

利用CSS的border属性为表格添加边框

CSS提供了border-collapse属性来设置表格的这两种边框是独立显示还是合并显示。

该属性的取值如下所示：

separate，表格的外边框和单元格边框独立显示。

collapse，表格的外边框和单元格边框合并显示。

下图为我们展示了表格的边框合并显示后的外观。

表格边框合并

相信看到这张图后，许多有经验的设计师一定看出了问题。这不是将HTML中<table></table>标记对中的cellspacing属性设置为0的外观吗？

是的，不过如果大家在电脑上尝试一下，你会发现，与cellspacing属性设置为0还不完全一样，利用CSS技术实现的边框明显变得非常细，也就是在平面设计领域里所说的“极细”效果。

二、如何调整相邻单元格之间的距离：

当表格的border-collapse属性设置为separate，也就是边框独立时，CSS利用border-spacing属性来设置相邻单元格之间的距离。

该属性的取值为带有单位的数值。

CSS代码如下所示：

table{

border-collapse:separate;

border-spacing:10px;

}

上述代码设置相邻单元格之间的距离为10像素，这个距离也是单元格边框和表格边框之间的距离。

最终的表格效果如下图所示。

调整相邻单元格之间的距离

注意：border-spacing属性必须在border-collapse属性设置为separate时才能起作用。

三、设置表格标题的位置：

在<table></table>标记对中，有一个名为<caption></caption>的标记对，是用来在表格内部实现表格标题的标记对。该标记有一个名为align的HTML属性，可以调整表格标题处于表格的相对位置。CSS提供了caption-side属性来代替HTML中的align属性。

该属性的取值如下所示：

top，表格标题在表格的顶部中心。

bottom，表格标题在表格的底部中心。

left，表格标题在表格的顶部左侧。

right，表格标题在表格的顶部右侧。

通过实际操作发现，left和right取值已经不再起作用。而top和bottom取值还是有效果的。

CSS代码如下所示：

table caption{

caption-side:bottom

}

最终的表格效果如下图所示。

设置表格标题的位置

四、设置无内容的单元格是否显示单元格边框：

CSS使用empty-cells属性来设置表格中没有内容的单元格是否显示单元边框。

该属性的取值如下所示：

hide，表格中没有内容的单元格隐藏单元格边框。

show，表格中没有内容的单元格显示单元格边框。

CSS代码如下所示：

table{

empty-cells:hide;

}

最终的表格效果如下图所示。

设置没有内容的单元格边框线消失

五、表格数据布局的计算算法：

CSS使用table-layout属性来设置表格数据在布局时的算法。

该属性的取值如下所示：

auto，表格数据的布局基于各个单元格的内容计算，即内容多的单元格宽，内容少的单元格窄。该算法需要先遍历表格中每一个单元格的内容多少，因此算法计算时间较长，表格渲染速度较慢。

fixed，表格数据的布局基于表格的总宽度和列数，即所有单元格的宽度都是平分表格总宽度的。该算法计算时间较短，表格渲染速度较auto取值略快。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

在接下来的文章中，小海前端（头条号）会为广大学习前端开发的小伙伴们讲解CSS3中提供的增强用户界面的属性。希望一直关注小海前端（头条号）的你千万不要错过。