css表格table样式和属性 – CSS教程

上一章CSS教程请查看：css列表属性和样式

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

使用CSS对表进行样式化

当你构建一个没有任何样式或属性的HTML表时，浏览器将显示它们而不显示任何边框，使用CSS对表进行样式化可以极大地改善其外观。

下面几节将向你展示如何使用CSS控制表元素的布局和表示，从而创建优雅和一致的表。

向表添加边框

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

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

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

表折叠边界

如果你已经看到了前面示例的输出，那么你就会注意到每个表单元格都有单独的边框，而且相邻表单元格的边框之间也有一些空间。这是因为默认情况下，表单元格边界是分开的。但是，你可以使用<table>元素上的border-collapse属性将单独的表边框折叠成一个：

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

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

还可以通过将CSS border-spacing属性的值设置为0来删除表格单元格边框之间的空间。但是，它只删除了空间，而不像你将border-collapse设置为collapse时那样合并边界。

注意：如果<!DOCTYPE>没有在HTML文档中指定，border-collapse的CSS属性可能会产生意想不到的结果。

调整表内空间

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

th, td {
    padding: 15px;
}

如果表格的边框是分开的(默认情况下)，还可以使用CSS border-spacing属性调整单元格边框之间的间距。

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

table {
    border-spacing: 10px;
}

控制表布局

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

你可以在CSS表格布局属table-layout性的帮助下做到这一点。此属性定义用于布局表单元格、行和列的算法。该属性有两个值：

• auto – 自动使用自动表格布局算法，使用此算法，可以调整表及其单元格的宽度以适应内容，这是默认的。
• fixed – 使用固定表布局算法。在这个算法中，表格的水平布局不依赖于单元格的内容，它只取决于表的宽度、列的宽度以及边框或单元格的间距。

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

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

如果没有表格布局属性table-layout的固定值，在大的表格上，在浏览器呈现整个表格之前，用户不会看到表格的任何部分。

提示：你可以通过指定表格布局属性来优化表格渲染性能。此属性的固定值导致表一次呈现一行，以更快的速度向用户提供信息。

处理空单元格

empty-cells CSS属性控制使用分离边框模型的表格中没有可见内容的单元格的边框和背景的呈现。

此属性可以取三个值之一：show, hide和inherit。

下面的样式规则隐藏表元素中的空单元格。

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

控制表标题的位置

caption-side CSS属性设置表标题框的垂直位置。

下面的样式规则将表标题置于其父表之下。但是，要更改标题文本的水平对齐方式，可以使用文本对齐属性text-align。

caption {
    caption-side: bottom;
}