HTMLの学習パート22：HTMLテーブルでThead、Tbody、Tfoot要素を使用する
テーブルの行は分割できますthead、tfoot、tbody要素で表現されたtheadテーブル、tfootテーブル、tbodyテーブルに。各thead、tfoot、およびtbodyには行のグループが含まれ、各グループには<tr>要素で定義された少なくとも1つの行が含まれます。
<thead>、<tfoot>、および<tbody>要素は非常に長くて幅が広く、複数のページがあり、各ページ、ヘッドテーブル、およびフットテーブルも記述されているテーブルを記述する場合に便利です。これらの3つの要素を使用すると、CSSスタイルを使用して必要に応じてテーブルを配置でき、テーブルのレイアウトに影響を与えません。詳細については、以下の説明を検討してみましょう。
theadの要素
thead要素はコンテンツをグループ化するために使用されますまたは、表の一番上（先頭）にあるコンテンツ。 <thead>タグは、<table>要素の子要素として記述されます。つまり、<table>要素内の<caption>要素と<colgroup>要素の後、または<tfoot>、<tbody>、<tr>の前に配置されます。
使用中、<thead>要素は、テーブルの内容を示す<tbody>要素およびテーブルの下部（フィート）を示す<tfoot>とともに使用されます。
HTML5では特別な属性はありません<thead>要素に使用できますが、HTML4.01には、align、bgcolor、char、charoff、valignなどの属性があります。ただし、これらの属性は古くなっており、CSSを使用して<thead>要素を設定する必要があります。
Tbody要素
tbody要素はグループ化に使用されますコンテンツまたはテーブルの中央（本体）にあるコンテンツ。テーブルにボディテーブルが1つだけ含まれ、ヘッドテーブルまたはフットテーブルがない場合を除き、<tbody>タグを含める必要があります。
使用時には、<tbody>要素は、テーブルの上部（ヘッド）を示す<thead>要素およびテーブルの下部（フィート）を示す<tfoot>とともに使用されます。
HTML5では特別な属性はありません<tbody>要素に使用できますが、HTML4.01には、align、bgcolor、char、charoff、valignなどのいくつかの属性があります。ただし、これらの属性は古くなっているため、CSSを使用して<tbody>要素を設定する必要があります。
Tfoot要素
tfoot要素はコンテンツをグループ化するために使用されますまたはテーブルの下部（フィート）のコンテンツ。使用中、<tfoot>要素は、テーブルのコンテンツを示す<tbody>要素と、テーブルの上部（ヘッド）を示す<thead>とともに使用されます。開始タグ<tfoot>は、tfootテーブルが存在し、終了タグ<tfoot>が無視できる場合に含まれます。
HTML5では特別な属性はありません<tfoot>要素に使用できますが、HTML4.01には、align、bgcolor、char、charoff、valignなどのいくつかの属性があります。ただし、これらの属性は古くなっているため、CSSを使用して<tbody>要素を設定する必要があります。
覚えておくべきことは、thead、tbody、tfootには同じ数の列が含まれている必要があるということです。以下は、HTMLでこれら3つの要素を記述して使用するためのコードの例です。
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Grup Baris di HTML</title>
<style type="text/css">
table,th, td {
border: 1px solid black;
border-collapse: collapse;
width: 20%; }
tfoot { border:3px solid red; }
</style>
</head>
<body>
<table>
<tfoot> <!-- Meskipun elemen tfoot diletakkan di paling depan, hasilnya di browser berada di paling bawah>
<tr>
<td>Rata-Rata</td>
<td>16</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>011402001</td>
<td>15</td>
</tr>
<tr>
<td>011402002</td>
<td>17</td>
</tr>
</tbody>
<thead>
<tr>
<th>NIM</th>
<th>Poin</th>
</tr>
</thead>
</table>
</body>
</html>このようなブラウザでの結果：
上記のHTMLコードからわかるように、tfoot要素を前（開始タグ<table>の後）に配置しましたが、ブラウザーでは、このtfoot要素の関数がセルのコンテンツまたはテーブルの下部のコンテンツをグループ化するため、結果は下部になります。同様に、テーブルの先頭（ヘッド）でセルの内容をグループ化するthead要素と、テーブルの中央でtbody要素を使用します。
どうやって？これら3つの要素の機能を理解していますか？すでに理解している場合は、col、colgroup、captionタグの使用について次の資料に進んでください。
