テーブル関連のタグ
この記事ではテーブル関連のタグについて説明します。
テーブルやテーブルのキャプションを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チャンネルもご覧ください。