CSS 表格样式
2020-09-27 本文已影响0人
前白
本节我们来学习表格样式，通过 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;
}
在浏览器中的演示效果：
