本节咱们来学习表格款式，通过 CSS 中的属性能够设置表格的外观，例如表格边框款式、色彩、间距等。
设置表格边框
之前咱们讲 HTML 的应用讲过，在 HTML 中如果要设置表格的边框，能够应用 border 属性。而 CSS 中同样有一个 border 属性能够用来设置边框，上一节咱们也有讲到这个属性，所以这里就不具体讲啦。
示例：
将上面这个表格的边框设置成1像素、实线、蓝色：
<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <table> <tr> <td>单元格一</td> <td>单元格二</td> <td>单元格三</td> </tr> <tr> <td>单元格四</td> <td>单元格五</td> <td>单元格六</td> </tr> <tr> <td>单元格七</td> <td>单元格八</td> <td>单元格九</td> </tr> </table> </body></html>CSS 款式：
table, td{ border:1px solid blue;}在浏览器中的演示成果：
border-collapse
border-collapse 属性用于设置表格的边框是否被合并为一个繁多的边框。
属性值如下所示：
| 属性值 | 形容 |
|---|---|
| separate | 默认值，边框会被离开，不会疏忽 border-spacing 和 empty-cells 属性 |
| collapse | 如果可能，边框会合并为一个繁多的边框。会疏忽 border-spacing 和 empty-cells 属性 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值 |
示例：
为表格设置合并边框：
table{ border:1px solid blue; border-collapse: collapse;}td{ border:1px solid blue;}在浏览器中的演示成果：
border-spacing
border-spacing 属性设置相邻单元格的边框间的间隔，仅用于”边框拆散“拆散模式，也就是 border-collapse 属性的值为 separate。
示例：
例如设置表格单元格的边框间距为 10px：
table{ border:1px solid blue; border-collapse: separate; border-spacing: 10px;}td{ border:1px solid blue;}在浏览器中的演示成果：
empty-cells
empty-cells 设置是否显示表格中的空单元格，同样仅用于”拆散边框“模式。
属性值为：
| 属性值 | 形容 |
|---|---|
| hide | 不在空单元格四周绘制边框 |
| show | 默认，在空单元格四周绘制边框 |
| inherit | 规定应该从父元素继承 empty-cells 属性的值 |
示例：
暗藏表格的空单元格的边框：
table{ border:1px solid blue; border-collapse: separate; border-spacing: 10px; empty-cells: hide;}td{ border:1px solid blue;}在浏览器中的演示成果：