tbody要素 -- 表本体

基本データ

tbody要素
文書型 適用 子要素 開始タグ 終了タグ 分類
Strict ○ tr要素 省略可 省略可 table要素の子要素
Transitional ○
Frameset ○

属性

固有属性

align="行揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
同一グループに含まれるセルの行揃えをまとめて指定します。利用できる値は次のとおりです。
left
左揃え
center
中央揃え
right
右揃え
justify
両端揃え
char
char属性で指定された文字に揃える(デフォルトは小数点を表す文字)。対応しているブラウザがほとんどありません。
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
左揃え
tbody { text-align: left; }
中央揃え
tbody { text-align: center; }
右揃え
tbody { text-align: right; }
両端揃え
tbody { text-align: justify; }
特定の文字で揃える(ピリオドの場合)
tbody { text-align: "."; }
valign="垂直方向の位置揃え"
Strict: ○ | Transitional: ○ | Frameset: ○
セルの中身を垂直方向のどの位置にそろえるのかを指定します。利用できる値は次のとおりです。
top
上揃え
middle
中央揃え
bottom
下揃え
baseline
1行目の下端
この属性は非推奨ではありませんが、CSSを使って次のように指定するほうが望ましいです。
上揃え
tbody { vertical-align: top; }
中央揃え
tbody { vertical-align: middle; }
下揃え
tbody { vertical-align: bottom; }
1行目の下端
tbody { vertical-align: baseline; }
char="行を揃える文字"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、どの文字で位置を揃えるのかを指定します。デフォルトでは小数点を表す記号(日本語ならピリオド)です。
charoff="セルの端からchar属性で示した文字までの空白"
Strict: ○ | Transitional: ○ | Frameset: ○
align="char"を指定したときに、セルの左端からそろえる文字までの距離をピクセル値かパーセント値で指定します。
bgcolor="背景色"(非推奨)
Strict: × | Transitional: △ | Frameset: △
同一グループに含まれるセルの背景色をまとめて指定します。この属性は非推奨です。
CSSで代用
tbody { background-color: #色; }

解説

thead要素、tfoot要素、tbody要素によって、横の行をヘッダ、フッタ、本体のグループに分けることができます。この場合はthead要素、tfoot要素、tbody要素がこの順番で現れなければいけません。(tfoot要素が最後ではありません。)thead要素、tfoot要素は0個か1個、tbody要素は1個以上配置する必要があります。

<table summary="2月?3月の光熱費。1列目が月、
2列目から4列目までがそれぞれ水道代、ガス代、電気代です。">
  <caption>光熱費</caption>
  <thead>
    <tr>
      <th>月</th><th>水道代</th><th>ガス代</th><th>電気代</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>合計</td><td>10000円</td><td>7000円</td><td>8000円</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>2月</td><td>4000円</td><td>3000円</td><td>5000円</td>
    </tr>
    <tr>
      <td>3月</td><td>6000円</td><td>4000円</td><td>3000円</td>
    </tr>
  </tbody>
</table>
光熱費
月水道代ガス代電気代
合計10000円7000円8000円
2月4000円3000円5000円
3月6000円4000円3000円

表がグループ化されていると、対応ブラウザであれば表本体に大量のデータがあってもヘッダとフッタを先に読み込むことができるので、表全体のデータが読み込まれるのを待つ必要がなくなります。また、印刷時に表が途中で途切れてしまった場合、次のページにもヘッダとフッタを印刷するといった動作も可能になります。(対応ブラウザは少ないですが、Firefox 1.5はこの機能を利用することができます。)

たての列をグループに分けるにはcolgroup要素を使います。

Strict DTDの定義

<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ATTLIST (THEAD|TBODY|TFOOT)          -- table section --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
  >

Information

現在の位置