与表格相关的标签
在本文中，我们解释与表格相关的标签。
这解释了如何在HTML中描述表格和表格标题，并附有示例。
YouTube Video
与表格相关的标签
<table> 标签
1<table>
2 <tr>
3 <th>Header 1</th>
4 <th>Header 2</th>
5 </tr>
6 <tr>
7 <td>Data 1</td>
8 <td>Data 2</td>
9 </tr>
10</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
-
<table>标签用于创建一个表格，以行和列的形式组织和显示数据。<table>标签可视化地组织数据，创建具有多行和多列的表格。行由<tr>标签定义，表头单元格由<th>标签定义，数据单元格由<td>标签定义。 -
您可以使用CSS自定义表格的样式和布局。
<tr> 标签
1<tr>
2 <td>Row 1, Cell 1</td>
3 <td>Row 1, Cell 2</td>
4</tr>-
<tr>标签用于定义表格中的行。<tr>标签用于创建表格的每一行，包含单元格（<td>或<th>）。 -
每一行可以包含多个单元格，形成表格的整体结构。
<th> 和 <td> 标签
1<th>Header 1</th>
2<td>Data 1</td><th>标签定义表格的表头单元格。通常用于表头行，该单元格的内容为粗体且居中。<td>标签定义标准的表格数据单元格，用于显示常规表格数据。
colspan 和 rowspan 属性
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td colspan="2">Spanning Cell</td>
11 </tr>
12 <tr>
13 <td rowspan="2">Spanning Cell</td>
14 <td>Data 1</td>
15 </tr>
16 <tr>
17 <td>Data 2</td>
18 </tr>
19 </tbody>
20</table>| Header 1 | Header 2 |
|---|---|
| Spanning Cell | |
| Spanning Cell | Data 1 |
| Data 2 | |
colspan 和 rowspan 是当表格单元格跨越多列或多行时使用的属性。
colspan属性允许一个单元格跨越多个列。rowspan属性允许单元格跨越多行。
<thead>，<tbody>，<tfoot> 标签
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td>Data 1</td>
11 <td>Data 2</td>
12 </tr>
13 <tr>
14 <td>Data 3</td>
15 <td>Data 4</td>
16 </tr>
17 </tbody>
18 <tfoot>
19 <tr>
20 <td>Footer 1</td>
21 <td>Footer 2</td>
22 </tr>
23 </tfoot>
24</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
| Footer 1 | Footer 2 |
-
<thead>标签用于定义表格的头部部分。它通常包含列标题。<thead>标签位于表格顶部，定义列标题。这有助于清晰地区分数据部分。 -
<tbody>标签定义表格的主体部分。它包含数据行。<tbody>标签包含表格数据的主体部分。它位于<thead>和<tfoot>标签之间的行中。 -
<tfoot>标签定义表格的脚部部分，其中包括总计或注释。<tfoot>标签位于表格的末尾，用于显示总计或其他注释。在汇总或显示大型数据集的总计时，它特别有用。
<caption> 和 <colgroup> 标签
1<table>
2 <caption>Sample Table Caption</caption>
3 <colgroup>
4 <col style="background-color: #f2f2f2">
5 <col style="background-color: #e6e6e6">
6 </colgroup>
7 <thead>
8 <tr>
9 <th>Header 1</th>
10 <th>Header 2</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td>Data 1</td>
16 <td>Data 2</td>
17 </tr>
18 <tr>
19 <td>Data 3</td>
20 <td>Data 4</td>
21 </tr>
22 </tbody>
23</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
-
<caption>标签添加一个标题，使表格内容更清晰。它通常放置在表格顶部，用于总结表格的整体内容。 -
<colgroup>标签对表格中的列进行分组，用于应用样式或布局。通过包含<col>标签，您可以为特定列指定背景颜色或宽度。
表格示例
1<table>
2 <caption>Table Title</caption>
3 <colgroup>
4 <col span="2" style="background-color: lightblue;">
5 </colgroup>
6 <thead>
7 <tr>
8 <th>Header 1</th>
9 <th>Header 2</th>
10 <th>Header 3</th>
11 <th>Header 4</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>Data 11</td>
17 <td>Data 12</td>
18 <td>Data 13</td>
19 <td>Data 14</td>
20 </tr>
21 <tr>
22 <td>Data 21</td>
23 <td>Data 22</td>
24 <td>Data 23</td>
25 <td>Data 24</td>
26 </tr>
27 </tbody>
28 <tfoot>
29 <tr>
30 <td colspan="3">Table Footer Title</td>
31 <td>Table Footer Summary</td>
32 </tr>
33 </tfoot>
34</table>| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 11 | Data 12 | Data 13 | Data 14 |
| Data 21 | Data 22 | Data 23 | Data 24 |
| Table Footer Title | Table Footer Summary | ||