7.1 タグ <caption>
<caption>, <thead>, <tbody>, <tfoot> のタグは、
HTMLテーブルの構造化とセマンティックマークアップを向上させるために使用されるよ。これらはデータを整理し、
ユーザーや検索エンジンにもわかりやすくしてくれるんだ。
<caption>タグ
<caption>タグは、テーブルにタイトルを追加するために使用されるよ。これでテーブルの内容が説明できて、
ユーザーにも検索エンジンにも理解しやすくなる。
構文:
HTML
<table>
<caption>テーブルのタイトル</caption>
<!-- テーブルの内容 -->
</table>
例:
HTML
<table>
<caption>テーブルのタイトル</caption>
<tr>
<th>名前</th>
<th>スコア</th>
</tr>
<tr>
<td>イワン</td>
<td>90</td>
</tr>
<tr>
<td>マリア</td>
<td>85</td>
</tr>
</table>
7.2 タグ <thead>
<thead>タグは、テーブルのヘッダー行をグループ化するために使われるよ。これにより、テーブルのヘッダーを
主要な内容から論理的に分けることができるんだ。
構文:
HTML
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<!-- テーブルの内容 -->
</table>
例:
HTML
<table>
<thead>
<tr>
<th>名前</th>
<th>スコア</th>
</tr>
</thead>
<tbody>
<tr>
<td>イワン</td>
<td>90</td>
</tr>
<tr>
<td>マリア</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 タグ <tbody>
<tbody>タグは、テーブルのメインコンテンツをグループ化するのに使うよ。ヘッダーやフッターから
メインコンテンツを分けるのに役立つんだ。
構文:
HTML
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<tbody>
<!-- テーブルの内容 -->
</tbody>
</table>
例:
HTML
<table>
<thead>
<tr>
<th>名前</th>
<th>スコア</th>
</tr>
</thead>
<tbody>
<tr>
<td>イワン</td>
<td>90</td>
</tr>
<tr>
<td>マリア</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 タグ <tfoot>
<tfoot>タグは、テーブルのフッター行（下部行）をグループ化するために使用されるんだ。通常、
結果や要約情報を含むよ。
構文:
HTML
<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th>ヘッダー2</th>
</tr>
</thead>
<tbody>
<!-- テーブルの内容 -->
</tbody>
<tfoot>
<tr>
<td>合計1</td>
<td>合計2</td>
</tr>
</tfoot>
</table>
完全な例:
HTML
<table>
<thead>
<tr>
<th>名前</th>
<th>スコア</th>
</tr>
</thead>
<tbody>
<tr>
<td>イワン</td>
<td>90</td>
</tr>
<tr>
<td>マリア</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均スコア</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
これを覚えるのは本当に簡単だよ:
テーブルの構造の説明
<table>: 全体の外部コンテナ<caption>: テーブルのタイトルで、内容を説明<thead>: テーブルヘッダーの行をグループ化<tbody>: テーブルのメイン内容をグループ化<tfoot>: テーブルのフッター行をグループ化
内容の復習
学んだすべてのタグを使ってテーブルを作成し、スタイリングしてみよう。
HTML
<table>
<caption>試験結果一覧</caption>
<thead>
<tr>
<th>名前</th>
<th>スコア</th>
</tr>
</thead>
<tbody>
<tr>
<td>イワン</td>
<td>91</td>
</tr>
<tr>
<td>マリア</td>
<td>94</td>
</tr>
<tr>
<td>ニーナ</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均スコア</td>
<td>91.33</td>
</tr>
</tfoot>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION