乐趣区

关于前端:CSS-表格样式

jiezi

本节咱们来学习表格款式，通过 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;}

在浏览器中的演示成果：

退出移动版