18、CSS表格的应用：创建美观且实用的数据展示

CSS表格的应用：创建美观且实用的数据展示

1. 表格的基本样式

在网页设计中，表格是一种非常重要的数据展示工具。使用CSS可以极大地提升表格的视觉效果和用户体验。首先，我们来看看如何为表格设置基本样式。

设置表格边框

为了让表格看起来更加整洁，通常会给表格添加边框。可以通过以下CSS代码实现：

table {
  border-collapse: collapse;
  width: 100%;
}

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

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

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

这段代码设置了表格的边框合并、宽度、单元格边框和填充，以及行的交替背景色。特别地，表头单元格（ th ）使用了绿色背景和白色文字，使其更加显眼。

设置背景和文字颜色

除了边框，背景和文字颜色也是影响表格外观的重要因素。可以通过以下CSS代码调整：

td {
  background-color: #ffffff;
  color: #000000;
}