笔记百科css表格样式
导
读
前面一节只是将了表格的定义，以及表格的基本标签，并没有对表格进行相关的美化设置，这一节将美化表格
我们将利用这些属性中，设置表格样式
正
文
在介绍CSS样式之前，介绍一个html的标签属性，border，这是table的属性，不是CSS样式，它的作用是设置表格的边框。
<table border=”1″> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tfoot> <tr> <td>尾部</td> <td>尾部</td> <td>尾部</td> <td>尾部</td> </tr> </tfoot> <tbody> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody></table>
这个设置的值，可以是整数，整数值越大，边框的宽度越大
下面开始介绍表格的样式
border-collapse
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性 |
| separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值 |
在上述案例的基础上，添加下面的样式
<style type=”text/css”> table{ border-collapse:collapse; }</style>
对比两者的区别，你有什么发现？
去掉了单元格之间的很多空白。
border-spacing
| length length | 规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。 如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 |
| inherit | 指定应该从父元素继承border – spacing属性的值 |
修改上述表格的样式
<style type=”text/css”> table{ border-collapse:separate; border-spacing:10px 50px; }</style>
单元格之间的空白，是可以调整的。
caption-side
| top | 默认值。把表格标题定位在表格之上。 |
| bottom | 把表格标题定位在表格之下。 |
| inherit | 规定应该从父元素继承 caption-side 属性的值。 |
在上述表格的基础上，添加下面的样式
caption { caption-side:bottom; }
表格的标题，是可以设置位置的。
empty-cells
| hide | 不在空单元格周围绘制边框。 |
| show | 在空单元格周围绘制边框。默认。 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值。 |
修改上述表格中的部分定义
<tfoot> <tr> <td>尾部</td> <td>尾部</td> <td></td> <td></td> </tr> </tfoot>
添加样式
<style type=”text/css”> table{ border-collapse:separate; empty-cells:hide; }</style>
比较前后的区别，发现了吗？
空单元格是否画边框，就可以这样的控制。
table-layout
| automatic | 默认。列宽度由单元格内容设定。 |
| fixed | 列宽由表格宽度和列宽度设定。 |
| inherit | 规定应该从父元素继承 table-layout 属性的值。 |
对上述表格进行修改
<table border=”1″> <caption>表格标题</caption> <thead> <tr> <th>标题</th> <th>标题</th> <th>标题</th> <th>标题</th> </tr> </thead> <tfoot> <tr> <td>尾部</td> <td>尾部</td> <td></td> <td></td> </tr> </tfoot> <tbody> <tr> <td>单元格单元格单元格</td> <td>单元格单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> <tr> <td>单元格</td> <td>单元格</td> <td>单元格</td> <td>单元格</td> </tr> </tbody></table>
单元格的长度随着文本的内容改变，如果设置单元格的宽度呢
<style type=”text/css”> table{ border-collapse:separate; empty-cells:hide;
width: 800px; }</style>
设置了表格的宽度之后，单元格的长度是跟随单元格中内容变化的，如果添加一条属性设置呢
<style type=”text/css”> table{ border-collapse:separate; empty-cells:hide; table-layout:fixed; width: 800px; }</style>
单元格的长度，已经是平均分布了，这个属性设置在很多场合是非常实用。
（本文引用的很多知识点，感谢【菜鸟教程】的分享：https://www.runoob.com/）
