表格是网页中常用的布局元素之一，用于组织和展示结构化的数据。HTML 提供了一系列标签来创建表格，并允许我们通过合并单元格、设置边框和间距来调整表格的显示方式。本节将详细讲解 HTML 表格的基本结构、样式设置及高级功能。
1. 基本表格结构：<table>, <tr>, <th>, <td>
表格的基本结构由四个主要标签组成：
<table>：用于创建表格。<tr>：表格行，用于包含表格的每一行。<th>：表头单元格，用于定义表格的列标题，通常文本加粗居中显示。<td>：表格数据单元格，用于定义表格中的数据。
示例：
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</table>作用：
<table>创建表格容器。<tr>包裹每一行数据。<th>用于定义表头，显示列标题，通常文字加粗居中。<td>用于定义表格的实际数据单元格。
2. 表格的边框、间距设置
HTML 表格默认情况下没有边框，但可以通过 CSS 来设置边框、间距以及其他样式。通过 border 属性可以给表格添加边框，cellspacing 和 cellpadding 用于设置单元格间的间距和内边距。
示例：
<table border="1" cellspacing="5" cellpadding="10">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
</table>border="1"：为表格添加边框，值为1表示细边框。cellspacing="5"：设置单元格之间的间距为 5 像素。cellpadding="10"：设置单元格内容与边框的内边距为 10 像素。
注意：为了更灵活地控制表格样式，建议使用 CSS 来控制表格的边框和间距，例如：
<style>
table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
}
th, td {
border: 1px solid black; /* 表格边框 */
padding: 10px; /* 单元格内边距 */
text-align: left; /* 左对齐 */
}
</style>3. 合并单元格：colspan, rowspan
在 HTML 表格中，我们可以使用 colspan 和 rowspan 属性来合并单元格，从而创建更加复杂的表格布局。
colspan：合并多列单元格。rowspan：合并多行单元格。
示例：
- 合并列：
<table border="1">
<tr>
<th colspan="2">姓名</th>
<th>年龄</th>
</tr>
<tr>
<td colspan="2">张三</td>
<td>25</td>
</tr>
</table>在上述示例中，colspan="2" 表示将姓名列的表头和表格数据单元格合并成两个单元格的宽度。
- 合并行：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>25</td>
</tr>
<tr>
<td>30</td>
</tr>
</table>在上述示例中，rowspan="2" 表示张三的姓名跨越了两行。
作用：
colspan和rowspan属性可以帮助合并表格中的单元格，减少冗余数据，制作更加简洁和整齐的表格布局。
4. 表头、表格标题：<thead>, <tbody>, <tfoot>
为了提升表格的可读性并优化样式，HTML5 引入了三个新的标签来分隔表格的不同部分：<thead>（表头）、<tbody>（表格主体）和 <tfoot>（表格底部）。这些标签使得表格内容更加结构化，特别是对于长表格或有分页功能的表格，有助于分离表头、主体和表尾。
<thead>：用于定义表格的表头部分，通常包含列标题。<tbody>：用于定义表格的主体部分，包含表格的主要数据。<tfoot>：用于定义表格的底部部分，通常用于显示合计或脚注。
示例：
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>上海</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">表格脚注：数据来源于公司内部系统</td>
</tr>
</tfoot>
</table>作用：
<thead>：定义表头部分，通常显示列标题。<tbody>：包含表格的主要数据行。<tfoot>：包含表格的底部内容，通常用于显示合计或额外信息。
注意：虽然这三个标签并非必须使用，但它们有助于表格结构的清晰和可维护性，尤其是在动态加载数据时非常有用。
总结
HTML 表格是网页中组织数据的重要方式，通过合理使用 <table>, <tr>, <th>, <td> 标签，我们可以展示各种结构化数据。利用 colspan 和 rowspan，可以合并单元格，创建更加灵活的表格布局。通过 <thead>, <tbody>, <tfoot> 标签，表格的结构更加清晰，便于管理和样式设计。掌握这些基本技巧后，您可以在网页中展示更加专业的表格数据。