HTML表格是网页中用来组织和展示数据的一种重要元素。HTML 提供了 <table> 标签，用于创建表格，并通过其他相关标签来定义表格的结构和样式。

1. 基本语法

HTML 表格的基本结构由 <table>、<tr>、<th> 和 <td> 等元素组成。

基本结构：

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
    <tr>
        <td>数据3</td>
        <td>数据4</td>
    </tr>
</table>

• <table>：定义表格。
• <tr>：定义表格中的一行。
• <th>：定义表格头部单元格，通常是加粗并居中的文本。
• <td>：定义表格数据单元格，包含实际数据。

2. 表格的主要元素

1. <table> 标签

用于创建表格容器。

<table>
    <!-- 表格内容 -->
</table>

2. <tr> 标签

表示表格中的一行，可以包含一个或多个 <th> 或 <td> 元素。

<tr>
    <!-- 表格行内容 -->
</tr>

3. <th> 标签

定义表头单元格，文本通常为加粗且居中。

<th>表头</th>

4. <td> 标签

定义数据单元格，包含实际的数据。

<td>数据</td>

5. <caption> 标签

定义表格的标题，位于表格的顶部。

<table>
    <caption>表格标题</caption>
    <!-- 表格内容 -->
</table>

3. 表格的布局

1. 表格边框

通过 CSS 设置表格的边框，确保表格行和列之间有清晰的分隔线。

<table border="1">
    <!-- 表格内容 -->
</table>

或者使用 CSS 来定义边框：

table {
    border: 1px solid black;
    border-collapse: collapse;  /* 合并表格边框 */
}
td, th {
    border: 1px solid black;
    padding: 8px;
}

2. 表格的行间距和单元格内边距

通过 cellspacing 和 cellpadding 来设置表格行之间的间距和单元格的内边距。

<table cellspacing="10" cellpadding="5">
    <!-- 表格内容 -->
</table>

或者使用 CSS 来设置：

table {
    border-spacing: 10px;  /* 设置单元格间距 */
}
td, th {
    padding: 10px;  /* 设置单元格内边距 */
}

4. 合并单元格

1. 合并行（rowspan）

rowspan 属性用于在纵向上合并单元格，指定该单元格跨越的行数。

<tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>数据1</td>
</tr>
<tr>
    <td>数据2</td>
</tr>

2. 合并列（colspan）

colspan 属性用于在横向上合并单元格，指定该单元格跨越的列数。

<tr>
    <td colspan="2">跨两列的单元格</td>
</tr>

5. 表格样式

使用 CSS 可以对表格进行更多样式设置，例如：背景颜色、文字颜色、字体、对齐方式等。

示例：设置表格的基本样式

<table style="width: 100%; border: 1px solid black; border-collapse: collapse;">
    <caption>学生成绩表</caption>
    <tr>
        <th>姓名</th>
        <th>数学</th>
        <th>英语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>85</td>
        <td>92</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>88</td>
        <td>89</td>
    </tr>
</table>

示例：CSS 样式

table {
    width: 100%;
    border-collapse: collapse;  /* 合并边框 */
}
th, td {
    padding: 10px;
    text-align: center;  /* 居中对齐 */
    border: 1px solid black;  /* 边框 */
}
caption {
    font-size: 1.5em;
    margin-bottom: 10px;
}

6. 表格的对齐

• text-align：用于设置单元格文本的水平对齐方式。可以设置为 left, right, center。
• vertical-align：用于设置单元格内容的垂直对齐方式。可以设置为 top, middle, bottom。

th, td {
    text-align: center;
    vertical-align: middle;
}

7. 表格的嵌套

你可以在表格单元格内嵌套另一个表格，这样可以用来展示更复杂的数据结构。

<table>
    <tr>
        <td>
            <table border="1">
                <tr>
                    <td>嵌套表格1</td>
                </tr>
                <tr>
                    <td>嵌套表格2</td>
                </tr>
            </table>
        </td>
        <td>外部表格单元格</td>
    </tr>
</table>

8. 表格的分页

当表格内容很多时，可以考虑使用分页功能来分割长表格。虽然 HTML 本身不支持分页，但可以通过 JavaScript 或服务器端分页来实现。

9. 表格的可访问性

• 使用 <th> 元素：为表格头部的单元格使用 <th>，它们不仅能提供语义，还能使屏幕阅读器更好地解析表格。
• scope 属性：可以明确表头单元格的作用范围，使用 scope="col" 为列头，scope="row" 为行头。

<table>
    <tr>
        <th scope="col">姓名</th>
        <th scope="col">数学</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>85</td>
    </tr>
</table>

总结

• <table>：创建表格容器。
• <tr>：定义表格的每一行。
• <th>：定义表头单元格。
• <td>：定义表格的数据单元格。
• border, cellspacing, cellpadding：控制表格的边框和间距。
• CSS：用于设置表格的样式，增加视觉效果。

表格是展示结构化数据的有效方式，通过 HTML 和 CSS 你可以控制表格的外观、对齐、边框等属性。