CSS 表格样式：学习如何设置 HTML 表格样式

介绍

在本实验中，你将学习用于样式化 HTML 表格的基础 CSS 属性。默认情况下，HTML 表格是朴素的，并且可能难以阅读。通过 CSS，你可以将一个基础表格转换为一个结构良好、视觉吸引力强且易于理解的数据展示。

我们将从一个基础 HTML 表格开始，并逐步为其应用样式。你将学习如何管理边框、添加间距、样式化表头以及对齐单元格内的文本。

必要的 index.html 文件已经为你创建。你的任务是在 styles.css 文件中编写 CSS 代码来样式化表格。你可以在工作区的 "Web 8080" 标签页中实时预览你的更改。

在本步骤中，我们将开始样式化我们的表格。默认情况下，HTML 表格单元格拥有各自独立的边框，这可能导致出现“双边框”外观，显得粗重且过时。border-collapse 属性控制表格边框是分开的还是合并成单个边框。

我们将设置 border-collapse 为 collapse，以创建简洁的单线边框。

首先，从左侧的文件浏览器中打开 styles.css 文件。将以下 CSS 规则添加到该文件中。

table {
  border-collapse: collapse;
}

添加代码后，保存文件。虽然此时你还看不到边框，但此属性对于下一步至关重要。你可以切换到 "Web 8080" 标签页查看实时预览，尽管在此阶段视觉变化会很小。

table tag

既然我们已经设置了表格使用合并边框模型，现在让我们为表头单元格 (th) 和数据单元格 (td) 添加实际的边框。我们可以使用逗号分隔的选择器一次性选中这两个元素。

在本步骤中，你将为表格中的每个单元格添加一个 1px 的实心黑色边框。

将以下 CSS 规则添加到你的 styles.css 文件中，放在现有的 table 规则下方。

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

保存文件并切换到 "Web 8080" 标签页。现在你应该能看到每个表格单元格周围都有一个简洁的单线边框。

table tag

表格现在有了边框，但单元格内的内容与边缘紧密接触，看起来很拥挤。我们可以使用 padding 属性在内容和单元格边框之间添加空间，以提高可读性。

在本步骤中，你将为所有表格单元格添加 8px 的 padding。

修改 styles.css 中现有的 th, td 规则，加入 padding 属性。

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

保存文件后，再次检查 "Web 8080" 标签页。你会注意到单元格现在变大了，文本周围有了舒适的间距。

table tag

为了让表头从数据行中脱颖而出，通常的做法是为其设置不同的背景颜色。这可以在视觉上将列标题与内容区分开。

在本步骤中，你将为表头单元格 (th) 添加浅灰色背景色。

在 styles.css 中添加一条新的 CSS 规则，仅针对 th 元素。

th {
  background-color: #f2f2f2;
}

保存文件并在 "Web 8080" 标签页中查看结果。你的表格的表头行现在应该有一个独特的背景颜色，便于识别。

文本对齐对于表格的可读性至关重要。默认情况下，表头单元格 (th) 居中对齐，而数据单元格 (td) 左对齐。虽然左对齐是 td 元素的默认行为，但显式设置它是一种良好的实践，可以确保在所有浏览器中渲染一致。

在本步骤中，你将为数据单元格显式设置文本对齐方式为左对齐。

在你的 styles.css 文件中为 td 选择器添加一条新的 CSS 规则。

td {
  text-align: left;
}

保存文件。由于这是默认行为，你可能不会在 "Web 8080" 标签页中看到视觉上的变化，但你的样式表现在对于预期设计更加健壮和明确。这完成了我们表格的基本样式设置。

table tag

恭喜你完成了本次实验！你已成功地使用基础的 CSS 属性，将一个普通的 HTML 表格转换成了一个风格专业、外观精美的表格。

在本次实验中，你学会了如何：

这些技能对于在网页上有效地展示表格数据至关重要。