はじめに
HTML では、<tbody> タグは HTML テーブルの本体を示すために使用され、テーブル内の行のセットで構成されます。この実験では、<tbody> タグを使用して簡単な HTML テーブルを作成する手順を案内します。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
テーブルタグを作成する
好きなコードエディタで、index.html という名前の空の HTML ファイルを作成します。
HTML ファイルの <body> セクションに <table> タグを作成します。
<body>
<table></table>
</body>
表のヘッダー タグを追加する
<table> タグの中に、<thead> タグを作成し、その中に <th> タグを使ってヘッダー行を追加します。
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
表の本体 タグを追加する
<table> タグの中に、<tbody> タグを作成し、その中に <td> タグを使って行を追加します。
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</tbody>
</table>
表のフッター タグを追加する（オプション）
<table> タグの中に、<tfoot> タグを作成し、その中に <td> タグを使ってフッター行を追加します。
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total: 2 People</td>
</tr>
</tfoot>
</table>
テーブルをスタイリッシュにする
CSS を使ってテーブルを装飾します。必要に応じて <thead>、<tbody>、および <tfoot> も装飾します。
<style>
table {
border-collapse: collapse;
width: 50%;
}
th,
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
color: #444;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tfoot td {
text-align: right;
font-weight: bold;
}
</style>
まとめ
この実験では、<tbody> タグを使って行と列を持つ HTML テーブルを作成する方法を学びました。手順に従って、ヘッダー、本体、およびフッターセクションがある単純なテーブルを作成し、CSS を使ってテーブルを装飾してよりプロフェッショナルに見せました。<tbody> タグは、HTML で複雑なテーブルを構築するための便利なツールであり、動的で対話型のデータビジュアライゼーションを作成するために他のテーブル要素と併用されることがよくあります。
