12 列表与表格之表格标签及属性

在前一章中，我们探讨了 定义列表 的用法，接下来我们将深入了解 HTML 中如何使用表格来展示数据。表格是组织和表示信息的强大工具，尤其是在需要比较和呈现多种数据时。

表格的基本结构

在 HTML 中，表格由多个标签组成，主要包括：

• <table>: 表格的容器标签
• <tr>: 表格行标签
• <td>: 表格单元格标签（用于数据）
• <th>: 表头单元格标签（用于列标题）

示例：创建一个简单的表格

<table border="1">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>28</td>
        <td>程序员</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>34</td>
        <td>设计师</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>22</td>
        <td>学生</td>
    </tr>
</table>

在这个示例中，我们创建了一个包含三列的表格，分别为 姓名、年龄 和 职业。我们使用 <th> 标签来定义表头，使其在视觉上突显。

表格的常用属性

在表格中，我们可以使用多个属性来增强其功能和可读性。

1. border

border 属性可以用来设置表格的边框，值可以是像素的数量，例如 border="1"，这将为表格添加1像素的边框。

2. cellpadding

cellpadding 属性用来设置单元格内的填充空间，增加了内容与边框之间的距离。例如，cellpadding="10" 将会在单元格内增加10像素的填充。

3. cellspacing

cellspacing 属性用来设置单元格之间的间隔。像这样使用 cellspacing="5"，可以在表格的单元格之间添加5像素的间隙。

4. colspan 和 rowspan

• colspan: 允许一个单元格横跨多个列。
• rowspan: 允许一个单元格竖跨多个行。

示例：使用 colspan 和 rowspan

<table border="1">
    <tr>
        <th>项目</th>
        <th colspan="2">分数</th>
    </tr>
    <tr>
        <td>数学</td>
        <td>张三</td>
        <td>95</td>
    </tr>
    <tr>
        <td>英语</td>
        <td rowspan="2">李四</td>
        <td>89</td>
    </tr>
    <tr>
        <td>科学</td>
        <td>76</td>
    </tr>
</table>

在这个示例中，第一行的 分数 列使用了 colspan="2"，使得这个单元格横跨了两列。而在 英语 行的李四行，使用 rowspan="2"，使得李四的分数在两个行中占用了一个单元格。

表格的标题和对齐

可以使用 <caption> 标签为表格添加标题，默认情况下，标题会出现在表格的顶部。

<table border="1">
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
    </tr>
    <!-- 其他行 -->
</table>

对于单元格的内容对齐，可以使用 align 和 valign 属性。

<td align="center" valign="top">内容</td>

• align 属性可以接受的值包括 left、center 和 right。
• valign 属性可以接受的值包括 top、middle 和 bottom。

结论

在本章中，我们学习了 HTML 表格的基本结构、常用属性及其用法。善用表格可以让我们更有效地呈现和组织数据。无论是在网站设计还是数据展示中，掌握表格的使用都是必不可少的技巧。

在下一章中，我们将转向超链接的使用，这是网页构建中非常重要的一环。我们会学习如何创建链接，链接的目标和实现导航等内容。希望你能继续关注下篇教程！