與表格相關的標籤
在本文中，我們將解釋與表格相關的標籤。
這解釋了如何在 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 | ||
-
使用
<table>標籤來建立以列和欄形式顯示數據的表格。 -
使用
<thead>標籤來分組表格的標題列。它通常包含<th>標籤作為標題。 -
使用
<tbody>標籤來分組表格的主要內容。它通常包含由<td>標籤組成的數據列。 -
使用
<tfoot>標籤來分組表格的底部列。適合顯示總數或附註。 -
使用
<colgroup>標籤來分組表格的欄，並對整體應用樣式。 -
使用
<caption>標籤為表格添加標題文字，方便用戶理解表格內容。 -
colspan屬性允許一個單元格橫跨多個列。 -
rowspan屬性允許單元格跨越多個行。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。