13、网页表格的创建与优化

网页表格的创建与优化

1. 表格基础

在网页中， <table> 元素用于表示信息网格，它是数据行的容器，数据行由 <tr> 元素表示，而 <tr> 元素又包含了 <td> 元素中的表格数据。按照这个简单的模式，我们可以轻松构建大型的数据网格。

1.1 添加表格标题

每个表格都应该有一个标题，以便网站访问者了解表格的用途。使用 <caption> 元素可以为表格提供正式的标题，该元素应直接出现在 <table> 标签之后、第一行之前。

示例代码如下：

<table>
  <caption> Opening hours for the Example Cafe</caption>
  <tr>
    <!-- 表格行内容 -->
  </tr>
</table>

使用 <caption> 元素能直接将表格内容与描述关联起来，这对屏幕阅读器和处理网页的应用程序（如搜索引擎）很有帮助。

2. 表格分组技术

2.1 使用 colspan 属性跨列

<td>