HTML 表格

1. 概述

HTML（HyperText Markup Language）是一种标记语言，用于创建网页。其中，表格是网页设计中常用的一种元素，用于展示数据和布局结构。

HTML 表格由一系列的行和列组成，其中每个单元格可以包含文本、图像或其他 HTML 元素。通过 HTML 表格，我们可以更加灵活地展现数据，并对其进行分组、排序、筛选等操作。

本文将详细介绍 HTML 表格的基本结构、属性、样式以及相关的代码示例。

2. 表格结构

HTML 表格以 <table> 元素开始，并以 </table> 元素结束。在表格内部，我们可以使用 <tr> 元素定义表格的行，使用 <th> 元素定义标题行，使用 <td> 元素定义数据行。

下面是一个简单的表格示例：

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

上述代码中，我们定义了一个包含3列的表格，第一行是标题行，后面两行分别是数据行。通过使用 <th> 元素，我们可以突出显示标题行。

3. 表头与表体分离

通常，我们把表格的第一行称为表头（<thead>），其余的行称为表体（<tbody>）。分离表头和表体有助于提高表格的可读性和可访问性。

以下是一个具有表头和表体的表格示例：

<table>
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

上述代码中，我们使用了 <thead> 元素定义了表头行，并使用 <tbody> 元素定义了表体。这样一来，除了提高可读性外，还可以利用 CSS 样式控制表头和表体的样式。

4. 表格属性

4.1 border 属性

表格的 border 属性用于设置表格边框的宽度。可以设置的值有：

0：无边框
1：细边框
2：中等边框

以下是一个设置表格边框的示例：

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

4.2 cellpadding 和 cellspacing 属性

cellpadding 属性用于设置单元格内边距的大小，cellspacing 属性用于设置单元格之间的间距。

以下是一个设置单元格边距和间距的示例：

<table cellpadding="10" cellspacing="5">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

4.3 align 和 valign 属性

align 属性用于设置表格的水平对齐方式，可以设置的值有：

left：左对齐
center：居中对齐
right：右对齐

valign 属性用于设置表格的垂直对齐方式，可以设置的值有：

top：顶部对齐
middle：居中对齐
bottom：底部对齐

以下是一个设置表格对齐方式的示例：

<table align="center" valign="middle">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

5. 表格样式

通过使用 CSS 样式，我们可以对表格进行更加灵活和美观的设计。

5.1 设置表格宽度

我们可以使用 CSS 的 width 属性为表格设置一个固定的宽度，也可以设置为百分比来适应不同的屏幕大小。

以下是一个设置表格宽度的示例：

<style>
    table {
        width: 100%;
    }
</style>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

在上述代码中，我们使用 <style> 元素定义了一个样式并将其应用于 <table> 元素，从而将表格的宽度设置为100%。

5.2 设置表格边框样式

通过使用 CSS 的 border 属性，我们可以设置表格边框的样式、颜色和宽度。

以下是一个设置表格边框样式的示例：

<style>
    table {
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid black;
    }
</style>

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

在上述代码中，我们使用 <style> 元素定义了两个样式：一个应用于 <table> 元素，将其边框合并为一个单一的边框；另一个应用于 <th> 和 <td> 元素，将其边框设置为1像素的黑色边框。

5.3 设置表格背景颜色

我们可以使用 CSS 的 background-color 属性为表格设置背景颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。

以下是一个设置表格背景颜色的示例：

<style>
    table {
        background-color: lightgray;
    }
</style>

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

在上述代码中，我们使用 <style> 元素定义了一个样式，并将其应用于 <table> 元素，将表格的背景颜色设置为灰色。

5.4 设置表格字体样式

我们可以使用 CSS 的 font-family、font-size 和 font-weight 属性来设置表格中文本的字体、大小和粗细。

以下是一个设置表格字体样式的示例：

<style>
    table {
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    th {
        font-weight: bold;
    }
</style>

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

在上述代码中，我们使用 <style> 元素定义了两个样式：一个应用于 <table> 元素，将表格文本的字体设置为 Arial，并指定了字体大小为14像素；另一个应用于 <th> 元素，将标题行的字体加粗显示。

6. 表格相关属性

6.1 rowspan 和 colspan 属性

HTML 表格中的 rowspan 属性和 colspan 属性用于合并单元格，从而将其扩展为跨行或跨列的单元格。

以下是一个使用 rowspan 和 colspan 属性的示例：

<table>
    <tr>
        <th rowspan="2">编号</th>
        <th colspan="2">信息</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

在上述代码中，我们通过设置 <th> 元素的 rowspan 属性为2，将其扩展为跨越两行的单元格。通过设置 <th> 元素的 colspan 属性为2，将其扩展为跨越两列的单元格。

6.2 caption 属性

HTML 表格的 caption 属性可用于为表格添加标题。标题通常位于表格的上方，用于简要描述表格的内容。

以下是一个使用 caption 属性的示例：

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>30</td>
    </tr>
</table>

在上述代码中，我们使用 <caption> 元素为表格添加了一个标题，内容为 “学生信息表”。