CSS 表格

使用 CSS 美化 HTML 表格

提升数据表格的可读性和外观。

默认的 HTML 表格很朴素。CSS 可以显著改善其展示效果：

样式化表格示例：

公司	联系人	国家
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria

应用于上述示例的 CSS (简化版)：

table {
  width: 100%;
  border-collapse: collapse; /* 对于获得清晰的边框至关重要 */
  margin-bottom: 1em;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #333;
}

表格边框

使用 border 属性为表格元素 (<table>, <th>, <td>) 添加边框。

单独应用边框通常会导致双重边框（一个属于表格单元格，一个属于相邻单元格或表格本身）：

/* 这会创建双重边框 */
table, th, td {
  border: 1px solid black;
}

要解决此问题并获得清晰的单边框，请在 <table> 元素上使用 border-collapse 属性。

折叠边框

border-collapse 属性控制表格边框是分开还是合并成单个边框。

separate (默认): 每个单元格都有自己独立的边框。
collapse: 相邻边框合并成单个边框。这通常是首选，以获得更整洁的外观。

使用 border-collapse: collapse; 的示例：

table {
  border-collapse: collapse;
  width: 100%; /* 通常一起使用 */
}

th, td {
  border: 1px solid black;
  padding: 8px; /* 添加内边距以留白 */
}

表格宽度和高度

使用 width 和 height 属性控制表格的尺寸。在 <table> 上设置 width: 100% 是常见的做法，使其跨越其容器。

你还可以为特定列 (<col> 元素) 或行/单元格 (<tr>, <th>, <td>) 设置尺寸，尽管高度通常由内容决定。

设置表格宽度和表头高度的示例：

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

th {
  height: 40px;
  background-color: #eee;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
}

文本对齐

水平对齐 (text-align)：

控制 <th> 和 <td> 单元格内的左对齐、右对齐、居中或两端对齐。默认情况下，<th> 文本通常居中，而 <td> 文本左对齐。

示例：左对齐表头文本并右对齐数字数据：

th {
  text-align: left;
}

/* 示例：针对数字单元格的类 */
td.numeric {
  text-align: right;
}

垂直对齐 (vertical-align)：

控制 <th> 和 <td> 单元格内的顶部对齐、居中对齐、底部对齐或基线对齐。默认通常是 middle。

示例：将单元格内容顶部对齐：

td {
  height: 60px; /* 使单元格更高以便看到效果 */
  vertical-align: top;
  border: 1px solid #ccc;
}

表格内边距 (Padding)

在 <th> 和 <td> 元素上使用 padding 属性，在单元格内容和单元格边框之间创建空间。

th, td {
  padding: 12px 15px; /* 顶部/底部 12px，左侧/右侧 15px */
  border: 1px solid #ccc;
}

表格颜色和样式

使用 background-color 和 color 为表格、行或单元格设置背景色和文本颜色。:nth-child 等伪类非常适合创建“斑马条纹”，以提高可读性。

示例：样式化表头并为行添加斑马条纹：

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

th {
  background-color: #04AA6D; /* 绿色背景 */
  color: white;
  padding: 10px;
  text-align: left;
}

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

/* 偶数行为浅灰色 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 悬停时为深灰色 */
tr:hover {
  background-color: #ddd;
}

实际应用：样式化表格对于在报告、仪表盘、产品对比等场景中清晰地展示表格数据至关重要。

表格标题 (Caption)：使用 <caption> HTML 元素作为表格标题，并使用 caption-side (top 或 bottom) 和标准的文本/背景属性进行样式设置。