css基础篇11–表格样式

欢迎大家来到IT世界,在知识的湖畔探索吧!

目标

• 表格边框合并
• 表格边框的间距设置
• 表格标题位置的设置

表格可以说是网页必备的元素之一，但是原生的表格样式都是很丑，列如表格加入边框的默认情况下，单元格与单元格之间有一定的空隙；设置单元格边框间距等等，都是可以通过css来设置自己的默认样式

表格边框合并

默认情况下，表格有边框的情况下，内部看似有一层填充物，其实是表格的外边框和内部单元格的间距。

这层间距是可以通过表格的标签属性进行设置，让它看起来像是合并了一样，但是这样的合并并不完美，会得到一个很粗的边框。

理想中的边框合并，应该达到exelce表格那样，是一个细线表格。Css专门有个属性是为了表格边框合并服务的。

语法：border-collapse：属性值

欢迎大家来到IT世界,在知识的湖畔探索吧!

属性值

会发现，通过css控制合并和通过标签属性合并的效果都不一样，通过css控制的效果跟exelce表格一模一样，属于细线表格。

对比图

表格边框间距

如果想自己设置表格边框的间距，一样是可以通过css来控制。

语法：border-spacing:像素值;

这个属性可以设置两个值。指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。

两个值

边框被拉大

单元格之间的距离也是一样的。

表格标题位置

表格的标题不一定都是设置在表格的上方，也有可能是设置在下方。

可以使用css来定义表格标题的位置

语法：caption-side:属性值;

属性值

这样就可以得到一个倒置标题的表格

标题倒置

总结

这些表格样式属性可能会有不少人会觉得很陌生，是因为这些样式属性都是用来做重置样式，只需要写一次，以后再也不用动它了！

总结