↩ zhcn 编程语言 Web相关 JSON 非公開: CSS表格样式（表格）

CSS表格样式（表格）

网页通常使用表格来显示数据，例如报告卡或财务报表，但默认情况下，表格的样式很差或与页面的样式不匹配。 CSS 具有允许您更改表格样式并极大改善其外观的属性。

table-layout：设置表格布局算法，有两种布局算法：固定表格布局算法和自动表格布局算法。
border-collapse：设置表格中单元格的边框是否按照标准 HTML 样式合并或分离。
border-spacing：设置表格边框分离时两个相邻边框之间的水平和垂直间距。
Caption-side：设置表格标题相对于表格的位置。
empty-cells：设置当表格单元格没有内容时是否显示单元格边框。

1.表格布局

table-layout 属性用于配置表布局中使用的布局算法，该属性的可选值有：

价值	解释
自动的	默认值“自定义表格布局”意味着表格中每列的宽度取决于单元格的内容。
固定的	固定表格布局。换句话说，表格宽度由列宽、单元格边框和单元格间距等因素决定。
继承	从父元素继承表格布局属性值

1）固定表格布局

固定表格布局允许浏览器更快地布置表格。在固定表格布局中，表格的水平宽度仅取决于列宽、表格边框宽度和单元格间距等因素，与单元格内的内容无关。这意味着表格中超出表格宽度的内容可能会被忽略。

2）自动表格布局

在自动表格布局中，列宽取决于单元格内容（没有换行符的最宽内容）。也就是说，如果单元格宽度为 100px，但单元格内容占据更多宽度。这会导致单元格的内容扩展单元格。由于此功能，该算法可能会很慢。

2.边框塌陷

使用 border-collapse 属性设置是否合并表格中的相邻边框。该属性的可选值为：

价值	解释
分离	默认情况下，两个相邻边框是分开的。使用它不会忽略边框间距和空单元格属性。
坍塌	两个相邻的边界合并为一个边界。如果使用此选项，边框间距和空单元格属性将被忽略。
继承	从父元素继承 border-collapse 属性的值

[示例] 使用 border-collapse 属性来合并或拆分单元格边框。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田太郎</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木次郎</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_556”对齐=“aligncenter”宽度=“523”]

图：border-collapse 属性演示[/caption]

默认情况下，表格边框是隐藏的，因此在上面的示例中，您需要使用<table>标签的 border 属性来显示边框。您也可以使用 CSS border 属性来设置边框。，如下图：

 table、th、td {
    boder：1px solid black;

3.边框间距

border-spacing 属性允许设置相邻单元格边框之间的距离（只有在 border-collapse 属性为否则才有效），其效果相当于<table>标签的 cellspacing 属性（即border-spacing:0;相当于cellspacing="0" )。 border-spacing 属性的语法是：

边框间距：长度length；

长度参数由一个值和单位组成，表示相邻单元格边框之间的距离，可选值有：

价值	解释
长度	以值加单位（例如 2px）设置相邻边框之间的距离。不允许使用负值。如果仅定义一个长度参数，则该值同时影响水平和垂直间距。如果同时定义两个长度参数，则第一个长度参数表示相邻边框之间的水平间距，第二个长度参数表示相邻边框之间的垂直间距。
继承	从父元素继承 border-spacing 属性的值

[示例] 使用 border-spacing 属性设置表格中相邻边框之间的间距。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-spacing: 15px 10px;
        }
        .table_two {
            margin-left: 20px;
            border-spacing: 20px;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_557”对齐=“aligncenter”宽度=“715”]

图：border-spacing属性演示[/caption]

4. 标题侧

Caption-side 属性允许设置表格标题的位置，该属性的可选值有：

价值	解释
顶部	默认情况下，将表头放置在表的正上方
底部	将表头放置在表的正下方
继承	从父元素继承标题 side 属性的值

[示例] 使用标题 side 属性设置表格标题的位置时：

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            caption-side: top;
        }
        .table_two {
            margin-left: 20px;
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_558”对齐=“aligncenter”宽度=“478”] 图：caption side属性演示

图：标题侧属性演示[/caption]

empty-cells属性用于设置当单元格没有内容时是否显示空单元格（只有在border-collapse属性为其他情况下才有效），该属性的可选值为：is。 :

价值	解释
隐藏	隐藏空单元格边框
展示	默认情况下，空单元格周围显示边框
继承	从父元素继承empty-cells属性的值

[示例] 使用empty-cells属性设置是否隐藏空单元格。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            empty-cells: hide;
        }
        .table_two {
            margin-left: 20px;
            empty-cells: show;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_559”对齐=“aligncenter”宽度=“464”] 图：empty-cells 属性演示

图：空单元格属性演示[/caption]

JSON

网页通常使用表格来显示数据，例如报告卡或财务报表，但默认情况下，表格的样式很差或与页面的样式不匹配。 CSS 具有允许您更改表格样式并极大改善其外观的属性。

table-layout：设置表格布局算法，有两种布局算法：固定表格布局算法和自动表格布局算法。
border-collapse：设置表格中单元格的边框是否按照标准 HTML 样式合并或分离。
border-spacing：设置表格边框分离时两个相邻边框之间的水平和垂直间距。
Caption-side：设置表格标题相对于表格的位置。
empty-cells：设置当表格单元格没有内容时是否显示单元格边框。

1.表格布局

table-layout 属性用于配置表布局中使用的布局算法，该属性的可选值有：

价值	解释
自动的	默认值“自定义表格布局”意味着表格中每列的宽度取决于单元格的内容。
固定的	固定表格布局。换句话说，表格宽度由列宽、单元格边框和单元格间距等因素决定。
继承	从父元素继承表格布局属性值

1）固定表格布局

固定表格布局允许浏览器更快地布置表格。在固定表格布局中，表格的水平宽度仅取决于列宽、表格边框宽度和单元格间距等因素，与单元格内的内容无关。这意味着表格中超出表格宽度的内容可能会被忽略。

2）自动表格布局

在自动表格布局中，列宽取决于单元格内容（没有换行符的最宽内容）。也就是说，如果单元格宽度为 100px，但单元格内容占据更多宽度。这会导致单元格的内容扩展单元格。由于此功能，该算法可能会很慢。

2.边框塌陷

使用 border-collapse 属性设置是否合并表格中的相邻边框。该属性的可选值为：

价值	解释
分离	默认情况下，两个相邻边框是分开的。使用它不会忽略边框间距和空单元格属性。
坍塌	两个相邻的边界合并为一个边界。如果使用此选项，边框间距和空单元格属性将被忽略。
继承	从父元素继承 border-collapse 属性的值

[示例] 使用 border-collapse 属性来合并或拆分单元格边框。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-collapse: separate;
        }
        .table_two {
            margin-left: 20px;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田太郎</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木次郎</td>
            <td>18</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_556”对齐=“aligncenter”宽度=“523”]

图：border-collapse 属性演示[/caption]

默认情况下，表格边框是隐藏的，因此在上面的示例中，您需要使用<table>标签的 border 属性来显示边框。您也可以使用 CSS border 属性来设置边框。，如下图：

 table、th、td {
    boder：1px solid black;

3.边框间距

border-spacing 属性允许设置相邻单元格边框之间的距离（只有在 border-collapse 属性为否则才有效），其效果相当于<table>标签的 cellspacing 属性（即border-spacing:0;相当于cellspacing="0" )。 border-spacing 属性的语法是：

边框间距：长度length；

长度参数由一个值和单位组成，表示相邻单元格边框之间的距离，可选值有：

价值	解释
长度	以值加单位（例如 2px）设置相邻边框之间的距离。不允许使用负值。如果仅定义一个长度参数，则该值同时影响水平和垂直间距。如果同时定义两个长度参数，则第一个长度参数表示相邻边框之间的水平间距，第二个长度参数表示相邻边框之间的垂直间距。
继承	从父元素继承 border-spacing 属性的值

[示例] 使用 border-spacing 属性设置表格中相邻边框之间的间距。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            border-spacing: 15px 10px;
        }
        .table_two {
            margin-left: 20px;
            border-spacing: 20px;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>山田</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鈴木</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_557”对齐=“aligncenter”宽度=“715”]

图：border-spacing属性演示[/caption]

4. 标题侧

Caption-side 属性允许设置表格标题的位置，该属性的可选值有：

价值	解释
顶部	默认情况下，将表头放置在表的正上方
底部	将表头放置在表的正下方
继承	从父元素继承标题 side 属性的值

[示例] 使用标题 side 属性设置表格标题的位置时：

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            caption-side: top;
        }
        .table_two {
            margin-left: 20px;
            caption-side: bottom;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <caption>表のタイトル</caption>
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>15</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_558”对齐=“aligncenter”宽度=“478”] 图：caption side属性演示

图：标题侧属性演示[/caption]

empty-cells属性用于设置当单元格没有内容时是否显示空单元格（只有在border-collapse属性为其他情况下才有效），该属性的可选值为：is。 :

价值	解释
隐藏	隐藏空单元格边框
展示	默认情况下，空单元格周围显示边框
继承	从父元素继承empty-cells属性的值

[示例] 使用empty-cells属性设置是否隐藏空单元格。

 <!DOCTYPE html>
<html>
<head>
    <style>
        table {
            float: left;
        }
        .table_one {
            empty-cells: hide;
        }
        .table_two {
            margin-left: 20px;
            empty-cells: show;
        }
    </style>
</head>
<body>
    <table class="table_one" border="1">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
    <table class="table_two" border="1px">
        <tr>
            <th>番号</th>
            <th>名前</th>
            <th>年齢</th>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>11</td>
        </tr>
    </table>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_559”对齐=“aligncenter”宽度=“464”] 图：empty-cells 属性演示

图：空单元格属性演示[/caption]

JSON