现代 CSS 优雅高效地设计 HTML 表格

站长

2024年07月30日 19:22 · 阅读数 29

这篇教程将教你如何使用现代 CSS 优雅高效地设计 HTML 表格。

HTML 表格的兴衰

表格几乎和网页一样古老，几十年来一直被使用着，也经常被滥用。曾经，网页设计师在没有其他合适方法的情况下，使用表格构建复杂的布局。谢天谢地，这种做法现在已经不常见了，但表格仍然是网页的重要组成部分，它们对于展示表格数据至关重要——二维数据，以行和列的形式组织。

虽然制作好看的表格有时会比较棘手，但本文将介绍一些构建简单和复杂 HTML 及 CSS 表格的技巧，并讲解现代 CSS 如何帮助我们实现这些效果。

表格元素

我们想要展示的数据是世界各国 2022 年与基准温度相比的平均温度变化。（数据来源：国际货币基金组织）

好的文章从扎实的结构开始。即使不添加任何样式，我们的表格也应该在视觉上易懂，并且可以被屏幕阅读器解析。

<table> 元素是包裹表格内容必不可少的元素。<thead> 和 <tbody> 元素分别包含表格的表头行和主体行。<tr> 元素构成表格的行，其中 <th> (表头) 和 <td> (正文) 元素表示单元格。我们还使用 <tfoot> (页脚) 元素在表格底部显示全球平均温度变化。

<table>
  <thead>
    <tr>
      <th>国家</th>
      <th>平均温度变化 (°C)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>英国</th>
      <td>1.912</td>
    </tr>
    <tr>
      <th>阿富汗</th>
      <td>2.154</td>
    </tr>
    <tr>
      <th>澳大利亚</th>
      <td>0.681</td>
    </tr>
    <tr>
      <th>肯尼亚</th>
      <td>1.162</td>
    </tr>
    <tr>
      <th>洪都拉斯</th>
      <td>0.945</td>
    </tr>
    <tr>
      <th>加拿大</th>
      <td>1.284</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>全球平均</th>
      <td>1.4</td>
    </tr>
  </tfoot>
</table>

我们的行和列都带有表头 (<th> 元素)。为了确保辅助技术可以轻松理解我们的内容，我们可以包含 scope 属性，并将其值设置为 "row" 或 "column"，以指示表头属于哪个轴。对于像这样的简单表格，这可能不是严格必要的，但当我们扩展表格变得更加复杂时，肯定会派上用场。

<table>
  <thead>
    <tr>
      <th scope="column">国家</th>
      <th scope="column">平均温度变化 (°C)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">英国</th>
      <td>1.912</td>
    </tr>
    <tr>
      <th scope="row">阿富汗</th>
      <td>2.154</td>
    </tr>
    <tr>
      <th scope="row">澳大利亚</th>
      <td>0.681</td>
    </tr>
    <tr>
      <th scope="row">肯尼亚</th>
      <td>1.162</td>
    </tr>
    <tr>
      <th scope="row">洪都拉斯</th>
      <td>0.945</td>
    </tr>
    <tr>
      <th scope="row">加拿大</th>
      <td>1.284</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">全球平均</th>
      <td>1.4</td>
    </tr>
  </tfoot>
</table>

最后，让我们为表格添加一个标题来概括其内容。我们将使用 <caption> 元素来实现这一点，它必须是 <table> 元素的第一个子元素。

<table>
  <caption>2022 年地表温度变化</caption>
  <thead>
    <tr>
      <th scope="column">国家</th>
      <th scope="column">平均温度变化 (°C)</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

万维网联盟 (W3C) 的网络可访问性倡议 (WAI) 提供了多种示例，演示了如何向表格添加更复杂的摘要：如何向表格添加更复杂的摘要

浏览器默认样式

如果我们直接在浏览器中查看这个表格，会发现它并没有我们想象中那么美观。这是因为浏览器会默认给 HTML 元素（包括表格）应用一些样式，这些样式被称为用户代理样式表（User Agent Stylesheet）。

这些默认样式虽然保证了基本的显示效果，但并不一定符合我们的设计需求。例如，浏览器可能会：

设置默认字体、颜色和间距：这些样式可能与我们的整体设计风格不一致。
给表格单元格添加边框：这些边框可能会过于粗糙或颜色不合适。
对齐方式：默认情况下，表格内容可能居中对齐，这并不是我们想要的。

浏览器默认样式示例

浏览器可能会给表格应用以下样式：

table {
  border-collapse: separate;
  border-spacing: 2px;
  border: 1px solid gray;
}

th, td {
  padding: 5px;
  text-align: center;
}

覆盖浏览器默认样式

为了让我们的表格符合我们的设计，我们需要覆盖这些默认样式。我们可以通过在自己的 CSS 中为表格元素设置更具体的样式来实现。

例如：

table {
  border-collapse: collapse; /* 合并单元格边框 */
  border: none; /* 去除表格外边框 */
}

th, td {
  border: 1px solid lightgray; /* 设置单元格边框 */
  padding: 10px; /* 设置单元格内边距 */
  text-align: left; /* 将文本左对齐 */
}

自定义表格样式

为了让我们的表格更美观，我们需要自定义样式。

基础样式重置

首先，我们可以重置一些默认样式，让我们的表格有一个干净的起点。

body {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
}

table {
  text-align: left;
  border-collapse: collapse;
}

这段代码做了一些事情：

设置了 body 的字体和行高。
将表格中的文本对齐方式设置为左对齐。
将表格的边框设置为合并，这样表格的边框看起来更连贯。

表头和表脚样式

为了更好地区分表头、表体和表脚，我们可以给它们设置不同的背景颜色或边框。

thead {
  border-bottom: 2px solid;
  background: whitesmoke;
}

tfoot {
  border-top: 2px solid;
  background: whitesmoke;
}

th,
td {
  border: 1px solid lightgrey;
  padding: 0.25rem 0.75rem;
}

这段代码给表头和表脚添加了底边框和背景色，同时给所有单元格添加了边框和内边距。

行颜色交替

为了增加表格的可读性，我们可以给表格行设置交替的背景色。

tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--color), transparent 60%);
}

这段代码利用 CSS 的 color-mix 函数，为偶数行设置了一个透明度为 60% 的背景色。

表格标题位置

我们可以通过 caption-side 属性来调整表格标题的位置。

table {
  caption-side: bottom;
}

表格宽度和列宽

如果表格过宽，我们可以设置表格的宽度，并使用 table-layout: fixed 来固定列宽。

table {
  width: max(65rem, 100%);
  table-layout: fixed;
}

th:first-of-type {
  width: 10rem;
}

垂直对齐

我们可以通过 vertical-align 属性来调整单元格内容的垂直对齐方式。

th,
td {
  vertical-align: baseline;
}

thead th {
  vertical-align: bottom;
}

更多样式技巧

固定表头： 使用 position: sticky 可以让表头在滚动时保持固定。
响应式设计： 使用媒体查询来适应不同屏幕尺寸。
复杂表格： 对于更复杂的表格，可以使用 CSS Grid 或 Flexbox 进行布局。

总结

通过合理地使用 CSS，我们可以创建出美观、易读且功能强大的 HTML 表格。本文只是对表格样式化的一个简单介绍，CSS 提供了非常丰富的样式属性，可以帮助我们实现各种各样的表格效果。

链接推荐

MDN Web Docs: developer.mozilla.org/zh-CN/docs/…
CSS Tricks: css-tricks.com/almanac/pro…

转载自:https://juejin.cn/post/7396332696660606985