共计 1336 个字符，预计需要花费 4 分钟才能阅读完成。
本节咱们来学习表格款式，通过 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;} 在浏览器中的演示成果：
正文完
