CSS Tables(表格)

表格通常用于显示表格数据。

用CSS样式表

当您构建没有任何样式或属性的HTML表时，浏览器将显示它们而没有任何边框。使用CSS样式化表格可以大大改善其外观。

以下各节将向您展示如何使用CSS控制表格元素的布局和表示方式，以创建优雅而一致的表格。

在表格上添加边框

CSS border属性是定义表格边框的最佳方法。

下面的实例将设置一个黑色边框的<table>，<th>和<td>元素。

table, th, td {
    border: 1px solid black;
}

折叠表格边框

如果您看到了前面示例的输出，您会注意到每个表格单元格都有单独的边框，并且相邻表格单元格的边框之间有一定的间隔。发生这种情况是因为默认情况下表格单元格边界是分隔的。但是，您可以使用元素border-collapse上的属性将单独的表格边框折叠成一个边框<table>：

在下面的示例中，样式规则将折叠表格单元格边框，并将一个像素的黑色边框应用于表格和表格单元格元素。

table {
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}

您也可以通过CSS的值设置删除表格单元格边框之间的空间border-spacing属性为0。但是，它只是删除了空间，但不合并就像当你设定的边界border-collapse来collapse。

调整表内部空间

默认情况下，浏览器创建的表单元格正好足以容纳单元格中的数据。要在表格单元格的内容周围添加更多空间，可以使用CSS padding属性，如下所示：

th, td {
    padding: 15px;
}

border-spacing如果表格的边框是分开的（默认设置），则还可以使用CSS 属性调整单元格边框之间的间距。

以下样式规则在表格中的所有边框之间应用10像素的间距：

table {
    border-spacing: 10px;
}

控制表格布局

默认情况下，表会扩展和收缩以容纳其中包含的数据。当数据填充到表中时，只要有空间，数据就会继续扩展。但是，有时需要为表格设置固定宽度以管理布局。

您可以借助CSS table-layout属性来执行此操作。此属性定义用于布置表格单元格，行和列的算法。此属性采用两个值之一：

• auto —使用自动表格布局算法。使用此算法，可以调整表格及其单元格的宽度以适合内容。这是默认值。

• fixed -使用固定表布局算法。使用这种算法，表格的水平布局不取决于单元格的内容；它仅取决于表格的宽度，列的宽度以及边框或单元格的间距。

在下面的示例中，样式规则指示表是使用固定布局算法进行布局的，并且具有300像素的固定宽度。

table {
    width: 300px;
    table-layout: fixed;
}

没有该table-layout属性的固定值，在大型表上，用户将看不到表的任何部分，直到浏览器呈现了整个表。

处理空单元格

该empty-cellsCSS属性控制边界，并有在表上没有明显的内容是一个使用分离的边框模型细胞背景的渲染。

这个属性可以取三个值之一：show，hide或inherit。

以下样式规则在table元素中隐藏空单元格。

table {
    border-collapse: separate;
    empty-cells: hide;
}

控制表格标题的位置

该caption-sideCSS属性设置表格标题框的垂直位置。

以下样式规则将表标题放在其父表下方。但是，要更改字幕文本的水平对齐方式，可以使用该text-align属性。

caption {
    caption-side: bottom;
}