HTML + CSS：构建美观、可访问的表格的终极指南

2023-01-01 17:38:22

HTML 表格：结构化展示数据的强大工具

概述

HTML 表格是一种强大且多用途的元素，用于组织和展示数据，使信息更易于理解和浏览。它们在各种情况下非常有用，从简单的列表到复杂的数据集。

创建基本表格

创建 HTML 表格非常简单。使用 <table> 标签开始，然后使用 <tr> 标签创建行，再使用 <td> 标签创建单元格。单元格的内容可以是文本、图像或其他 HTML 元素。例如，以下代码创建了一个简单的表格，其中包含姓名和年龄：

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

表格样式

使用 CSS 可以对表格进行样式设置，使其更具吸引力和易读性。常用的样式包括边框、背景色、字体和文本对齐方式。例如，以下 CSS 代码为表格添加边框和颜色：

table {
  border: 1px solid black;
  border-collapse: collapse;
  width: 100%;
}

td {
  padding: 5px;
}

表格布局

表格布局决定了表格在页面上的显示方式。有两种常见的布局：

固定布局： 表格的宽度和高度都是固定的。
自适应布局： 表格的宽度和高度根据内容自动调整。

表格标题和表脚

表格标题使用 <caption> 标签创建，显示在表格上方。表脚使用 <tfoot> 标签创建，显示在表格下方。这些元素可用于提供有关表格的附加信息，例如表名或。

表格可访问性

确保表格对所有人可访问非常重要。可以采取多种方法来提高表格的可访问性，包括：

添加替代文本
使用表标题和表脚
确保表格具有足够的对比度

响应式表格

响应式表格根据设备的屏幕尺寸自动调整大小。可以使用媒体查询来创建响应式表格，允许您在特定屏幕尺寸下应用不同的样式。

代码示例：响应式表格

<style>
@media (max-width: 768px) {
  table {
    width: 100%;
  }

  td {
    padding: 10px;
  }
}
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>