CSS 表格
在本教程中，您将学习如何使用 CSS 设置 HTML 表格的样式。
使用 CSS 设置表格样式
表格通常用于显示表格数据，例如财务报告。
但是当您创建一个没有任何样式或属性的 HTML 表格 时，浏览器会显示它们而没有任何边框。 使用 CSS，您可以极大地改善表格的外观。
CSS 提供了几个属性，允许您控制表格元素的布局和表示。 在下一节中，您将看到如何使用 CSS 创建优雅且一致的表格。
为表格添加边框
CSS border 属性是定义表格边框的最佳方式。
以下示例将为 <table>, <th>, 和 <td> 元素设置黑色边框。
table, th, td {
border: 1px solid black;
}默认情况下，浏览器会在表格周围以及所有单元格周围绘制边框，中间有一些空间，这会导致双边框。 要摆脱这种双边框问题，您可以简单地折叠相邻的表格单元格边框并创建干净的单线边框。
让我们看一下下面的插图，了解边框是如何应用于表格的。
折叠表格边框
在 CSS 中设置表格单元格的边框有两种不同的模型：separate 和 collapse。
在默认的分离边框模型中，每个表格单元格都有自己不同的边框，而在折叠边框模型中，相邻的表格单元格共享一个共同的边框。 您可以使用 CSS border-collapse 属性为 HTML 表格设置边框模型。s
以下样式规则将折叠表格单元格边框并应用一个像素的黑色边框。
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}注意： 您也可以通过将 CSS border-spacing 属性的值设置为 0 来去除表格单元格边框之间的空格。但是，它只是去除空格，而不像设置 < code>border-collapse 到 collapse。
调整表格内空间
默认情况下，浏览器会创建足够大的表格单元格以包含单元格中的数据。
要在表格单元格内容和单元格边框之间添加更多空间，您可以简单地使用 CSS padding 属性。 让我们试试下面的例子，看看它是如何工作的：
th, td {
padding: 15px;
}如果表格的边框是分开的（这是默认设置），您还可以使用 CSS border-spacing 属性调整单元格边框之间的间距。
以下样式规则在表格内的所有边框之间应用 10 像素的间距：
table {
border-spacing: 10px;
}设置表格宽度和高度
默认情况下，表格将呈现足够宽和高以包含其所有内容。
但是，您也可以使用 width 和 height CSS 属性显式设置表格及其单元格的宽度和高度。 以下示例中的样式规则将表格的宽度设置为 100%，将表格标题单元格的高度设置为 40px。
table {
width: 100%;
}
th {
height: 40px;
}控制表格布局
表扩展和收缩以容纳其中包含的数据。 这是默认行为。 随着数据在表内填充，只要有空间，它就会继续扩展。 但是，有时需要为表格设置固定宽度以管理布局。
您可以借助 CSS table-layout 属性来完成此操作。 此属性定义用于布局表格单元格、行和列的算法。 此属性采用以下两个值之一：
- auto — 使用自动表格布局算法。 使用此算法，表格及其单元格的宽度会调整以适应内容。 这是默认值。
- fixed — 使用固定表格布局算法。 使用这种算法，表格的水平布局不依赖于单元格的内容； 它仅取决于表格的宽度、列的宽度以及边框或单元格间距。 它通常比自动更快。
以下示例中的样式规则指定 HTML 表格使用固定布局算法进行布局，并具有 300 像素的固定宽度。 让我们尝试一下，看看它是如何工作的：
table {
width: 300px;
table-layout: fixed;
}提示：您可以通过为 table-layout 属性指定值 fixed 来优化表格呈现性能。 此属性的固定值会导致表格一次呈现一行，从而以更快的速度为用户提供信息。
注意： 在大表格上没有 table-layout 属性的 fixed 值，用户将看不到表的任何部分，直到浏览器呈现整个表。
对齐表格单元格内的文本
您可以水平或垂直对齐表格单元格内的文本内容。
单元格内容的水平对齐
对于表格单元格内的文本水平对齐，您可以像使用其他元素一样使用 text-align 属性。 您可以将文本左对齐、右对齐、居中对齐或对齐。
以下样式规则将左对齐 <th> 元素内的文本。
th {
text-align: left;
}注意： <td> 元素内的文本默认左对齐，而 <th> 元素内的文本默认居中对齐并以粗体显示。
单元格内容的垂直对齐
同样，您可以使用 CSS vertical-align 属性将 <th> 和 <td> 元素内的内容垂直对齐到顶部、底部或中间。 默认垂直对齐方式是中间。
以下样式规则将垂直底部对齐 <th> 元素内的文本。
th {
height: 40px;
vertical-align: bottom;
}控制表格标题的位置
您可以使用 CSS caption-side 属性设置表格标题的垂直位置。
标题可以放在表格的顶部或底部。 默认位置是顶部。
caption {
caption-side: bottom;
}提示：要更改表格标题文本的水平对齐方式（例如左或右），您可以简单地使用 CSS text-align 属性，就像使用普通文本一样。
处理空单元格
在默认使用单独边框模型的表格中，您还可以使用 empty-cells CSS 属性控制没有可见内容的单元格的呈现。
此属性接受 show 或 hide 值。 默认值为 show，它像普通单元格一样渲染空单元格，但如果指定了 hide 值，则不会在空单元格周围绘制边框或背景。 让我们尝试一个例子来了解它是如何工作的：
table {
border-collapse: separate;
empty-cells: hide;
}注意：在表格单元格内放置一个不间断空格 ( ) 使其不为空。 因此，即使该单元格看起来是空的，hide 值也不会隐藏边框和背景。
创建斑马条纹表格
为交替行设置不同的背景颜色是一种流行的技术，可以提高具有大量数据的表的可读性。 这通常称为对表格进行斑马条纹处理。
您可以使用 CSS :nth-child() 伪类 选择器简单地实现此效果。
以下样式规则将突出显示表格正文中的每个奇数行。
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}斑马条纹表格通常如下图所示。
注意： :nth-child() 伪类根据它们在一组兄弟中的位置来选择元素。 它可以采用数字、关键字 even 或 odd 或 xn+y 形式的表达式，其中 x 和 y 是整数（例如 1n、2n、2n+1、...）作为参数。
响应式表格
表格本质上不是响应式的。 但是，为了支持移动设备，您可以通过在小屏幕上启用水平滚动来增加对表格的响应式能力。 为此，只需使用 <div> 元素包装您的表格并应用样式 overflow-x: auto; ，如下所示：
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div>