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