web-dev-qa-db-ja.com

HTML tbodyの目的は何ですか？

誰かがテーブルでHTMLのtbodyを使用する主な理由は何ですか？フォーマットのためだけですか？

私は一般的にheadとbodyを使用します。 theadとtbodyは使用していません。

htmlhtml-table
32
Daniel Kivatinos

テーブルに意味的な意味を与えるには：

<table>
  <thead>
    <tr>
      <th>Person</th>
      <th>Amount</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Person1</td>
      <td>$5.99</td>
      <td>02/03/09</td>
    </tr>
    <tr>
      <td>Person2</td>
      <td>$12.99</td>
      <td>08/15/09</td>
    </tr>
  </tbody>
</table>

仕様による ：

テーブルの行は、それぞれTHEAD、TFOOT、およびTBODY要素を使用して、テーブルヘッド、テーブルフット、および1つ以上のテーブル本体セクションにグループ化できます。この分割により、ユーザーエージェントはテーブルの頭と足に関係なくテーブル本体のスクロールをサポートできます。長いテーブルを印刷すると、テーブルデータを含む各ページでテーブルの頭と足の情報が繰り返される場合があります。

テーブルヘッドとテーブルフットには、テーブルの列に関する情報が含まれている必要があります。テーブル本体には、テーブルデータの行が含まれている必要があります。

存在する場合、各THEAD、TFOOT、およびTBODYには行グループが含まれます。各行グループには、TR要素で定義された行が少なくとも1つ含まれている必要があります。

これの重要なセマンティックの重要性（スクリーンリーダーを考えてください）に加えて、データ行とは別にヘッダーのスタイルを簡単に設定できます。もう1つの関連する例は、 Tablesorter プラグインなどのjQueryプラグインで、データ構造がどのように見えるかを簡単に把握できます。

38
Paolo Bergantino

Tbodyの優れた用途の1つは、列のヘッダーとフッターを表示したまま、行をスクロールできるようにすることです。ただし、これは実際にcssをサポートしているブラウザでのみ機能します。申し訳ありませんが、Internet Explorerはありません！

<tbody style="height: 150px; overflow-y: scroll">
12
James

テーブルのヘッダーがすべての行の最初の列である場合はどうなりますか？その場合、テーブルのヘッダーを指定する方法はありません。パーサーはすべてがテーブルの本体の一部であると想定するため、実際にはHTMLが壊れます。

そして、thがヘッダーフィールドを指定するので、なぜそのタグが正確に必要なのですか？ブラウザはこれらのフィールドによってテーブルのどの部分がヘッダーであるかを見つけることができます。

Theadとtbodyのポイントは何ですか？それらはある場合には機能し、他の場合にはHTMLを壊します。それらはthの機能を複製します。それらはコードを複雑にし、問題を引き起こす可能性があります-tbodyについて知る前に、tr-sはテーブルの子であると思いました。

5
martinkunev

HTMLテーブルのヘッダー（thead）、本文（tbody）、およびフッター（tfoot）の部分を分離します。これは信じられないほど便利です。典型的な使用法は、列ヘッダーをthead要素に配置し、データをtbodyに配置することです。 tfoot要素はあまり一般的ではありませんが、便利な場合があります。

ちなみに、tbodyを指定しなくても、とにかく暗黙的に作成されます。

これはスタイリングの目的にも使用できます。例：

table thead tr { background-color: yellow; }
table tbody tr { background-color: #C9C9C9; }

また、JavascriptやjQueryで、選択可能な行を持つテーブルを作成する場合にも役立ちます（一例として）。通常は、上部のヘッダー行ではなく、tbodyの行を選択または強調表示することにのみ関心があります。

4
cletus

はい、スタイリングに使用できます。また、jQueryセレクターを使用して、選択する要素を区別するのにも役立ちます。結局のところ、theadまたはtbodyにtrタグを含めることができます。

1
Nosredna

HTMLのthead、tbody、およびtfoot要素は、テーブルの行をその内容に基づいて論理セクションにグループ化するために使用されます。これを実行したい主な理由は2つあります。

  1. ヘッダーやフッターとは独立して本文をスクロールできるようにするため
  2. テーブルのさまざまなセクションにさまざまなスタイルルールを簡単に適用できるようにするため。
<table>
  <thead>
  <tr>
     <th>Month</th>
     <th>Savings</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
      <td>Sum</td>
      <td>$180</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
      <td>February</td>
      <td>$80</td>
  </tr>
  </tbody>
</table>
0
Aashish