CSS - 表格

欢迎，有抱负的网页开发者们！今天，我们将深入CSS表格的世界。作为你友好的计算机科学老师，我很兴奋能引导你们进行这次旅行。表格可能看起来有些过时，但相信我，它们在现代化的网页设计中仍然非常有用。那么，让我们卷起袖子开始吧！

CSS 表格 - 边框折叠

想象一下你在围院子里建围栏。你希望围栏柱子互相接触，对吧？这正是border-collapse对表格边框所做的。它决定了单元格边框应该是分开的还是折叠成单个边框。

table {
border-collapse: collapse;
}

这段代码将使你的表格边框相互接触，创建一个整洁、统一的外观。就像给你的表格理了一个整洁的发型！

CSS 表格 - 边框间距

现在，如果你想在你的表格单元格之间留出一些空间，border-spacing就派上用场了。这就像表格单元格的社会距离！

table {
border-spacing: 5px;
}

这将在你单元格之间添加一个5像素的间隙。你甚至可以设置不同的水平和垂直间距：

table {
border-spacing: 5px 10px;
}

在这里，我们有5像素的水平间距和10像素的垂直间距。就像给你的表格单元格一些私人空间！

CSS 表格 - 标题位置

表格可以有标题，你可以使用caption-side来控制这些标题出现的位置。这就像决定把书的标题放在封面的顶部还是底部。

caption {
caption-side: bottom;
}

这将把你的表格标题放在底部。如果你喜欢顶部，也可以使用top。

CSS 表格 - 空单元格

你是否好奇过表格中的空单元格会发生什么？empty-cells属性让你决定是否显示它们。

table {
empty-cells: hide;
}

这将使空单元格不可见。就像和你的表格单元格玩捉迷藏！

CSS 表格 - 表格布局

table-layout属性决定了表格的单元格、行和列的布局方式。这就像在选择严格的座位表和晚餐聚会的自由座位之间。

table {
table-layout: fixed;
}

这设置了一个固定的表格布局，可以改善大型表格的渲染速度。

CSS 表格 - 固定布局

使用固定布局，表格的宽度由第一行或指定的宽度决定。就像在婚礼接待中分配座位。

table {
table-layout: fixed;
width: 100%;
}

th, td {
width: 25%;
}

这创建了一个具有四个等宽列的表格，不管内容如何。

CSS 表格 - 自动布局

自动布局会根据内容调整列宽。就像让客人在非正式晚餐聚会上自己选择座位。

table {
table-layout: auto;
width: 100%;
}

在这里，浏览器会根据内容调整列宽。

CSS 表格 - 高度和宽度

你可以使用height和width属性来控制你的表格及其单元格的大小。就像决定你的餐桌应该有多大。

table {
width: 100%;
}

td {
height: 50px;
}

这设置了表格宽度为其容器的100%，每个单元格高度为50像素。

CSS 表格 - 表格对齐

在表格单元格中对其内容是提高可读性的关键。这就像在盘子上布置食物——呈现很重要！

td {
text-align: center;
vertical-align: middle;
}

这将在每个单元格中水平和垂直居中内容。

CSS 表格 - 边框

边框可以使你的表格看起来更有吸引力，更容易阅读。就像在纸上画线来组织信息。

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

这给表格及其所有单元格添加了一个1像素的实线黑色边框。

CSS 表格 - 背景颜色

添加背景颜色可以使你的表格看起来更有吸引力，并帮助你区分表格的不同部分。就像把房子的房间涂上不同的颜色。

table {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

这为表格设置了一个浅灰色背景，并为表头单元格设置了绿色背景和白色文本。

CSS 表格 - 字体样式

设置表格中的文本样式可以大大提高可读性。就像为书籍选择正确的字体——这可以产生很大的差异。

table {
font-family: Arial, sans-serif;
}

th {
font-weight: bold;
}

td {
font-size: 14px;
}

这为整个表格设置了Arial字体，使表头文本加粗，并将单元格文本大小设置为14像素。

CSS 表格 - 其他样式

你可以应用许多其他样式到表格上。以下是一个快速概览：

属性	描述	示例
padding	单元格内的空间	td { padding: 10px; }
border-radius	圆角	table { border-radius: 5px; }
box-shadow	阴影效果	table { box-shadow: 2px 2px 5px grey; }
opacity	透明度	table { opacity: 0.8; }

CSS 表格 - 外边距

外边距可以给你的表格留出一些与其他页面元素的距离。就像在墙上相框周围留出一些空间。

table {
margin: 20px auto;
}

这给表格的顶部和底部添加了一个20像素的外边距，并水平居中。

CSS 表格 - 表格分隔符（垂直/水平）

你可以给你的表格添加分隔符来分隔列或行。就像在笔记本上用尺子画直线。

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

tr {
border-bottom: 1px solid black;
}

这会在列之间添加垂直线，在行之间添加水平线。

CSS 表格 - 条纹表格

条纹表格可以使阅读数据行更加容易。就像在书中每隔一行做标记以保持你的位置。

tr:nth-child(even) {
background-color: #f2f2f2;
}

这会在你的表格中创建交替的白色和浅灰色行。

CSS 表格 - 响应式表格

使表格响应式可以确保它们在所有设备上看起来都很好。就像有一个可以根据客人数量扩展或收缩的餐桌。

@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}

thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
border: none;
position: relative;
padding-left: 50%;
}

td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-label);
}
}

这段代码会在小屏幕上把表格转换为列表格式，使移动设备上更容易阅读。

CSS 表格 - 相关属性

以下是一张表格，列出了你可能在工作表时发现有用的相关CSS属性：

属性	描述
border-collapse	决定单元格边框是分开的还是折叠的
border-spacing	设置单元格边框之间的距离
caption-side	指定表格标题的位置
empty-cells	设置是否在空单元格上显示边框
table-layout	设置用于布局表格单元格、行和列的算法
vertical-align	设置单元格内内容的垂直对齐方式
text-align	设置单元格内内容的水平对齐方式

就这样了！你现在已经有装备来创建和设计CSS表格了。记住，熟能生巧，所以不要害怕尝试这些属性。快乐编码！

Credits: Image by storyset