<THEAD>テーブルにヘッダ行を設定

テーブル(表)の横方向の並び(行)は、意味的にヘッダ(<THEAD>)、本体(<TBODY>)、フッタ(<TFOOT>)という3つの構造にグループ化することができます。

グループ化したい部分がテーブル(表)のヘッダであれば<THEAD>を、テーブル(表)の本体部分であれば<TBODY>を、テーブル(表)のフッタであれば<TFOOT>を使います。 このようにグループ化することで、スタイルシートや属性をそのグループに対してまとめて適用できるようになります。

またその他にもブラウザの対応状況によっては、ヘッダとフッタを固定したまま本体部分(BODY)をスクロールさせることや、複数ページに渡るようなテーブル(表)を印刷する際に各ページごとにヘッダとフッタを印刷させることなどもできるようになります。

これらのタグを使用する場合は必ず<THEAD>~</THEAD>、<TFOOT>~</TFOOT><TBODY>~</TBODY>の順番で記述して下さい。 これはブラウザにヘッダとフッタを先に認識させられるようにするためです。 ただしこれらのタグに対応していないブラウザでは、フッタをボディの前に表示してしまう事がありますので、注意して下さい。

なお<TABLE>の本体部分(<TBODY>~</TBODY>)は必要に応じて複数配置することができ、いくつかのグループに分ける事もできます。 ですがTHEAD要素とTFOOT要素は一つのテーブル(表)内にひとつずつのみしか配置できませんので注意して下さい。

使用した時の例

<table border="2">
<thead>  
  <tr>
     <th>店舗名</th><th>住所</th><th>問合せ</th>
  </tr>
</thead>
<tfoot>
  <tr>
     <td colspan="3">更新日2016/10/2</td>
  </tr>
</tfoot>
<tbody>
  <tr>
     <td>下新庄</td><td>北蒲原郡下新庄5-4</td><td>025-294-5468</td>
  </tr>
  <tr>
     <td>中原</td><td>中原市中島</td><td>012-654-5748</td>
  </tr>
</tbody>
</table>

ブラウザ上の表示例

店舗名住所問合せ
更新日2016/10/2
下新庄北蒲原郡下新庄5-4025-294-5468
中原中原市中島012-654-5748

属性

align="left" セル内の行揃えの位置
  • left・・・左揃え(tdの初期値)
  • right・・・右揃え
  • center・・・中央揃え(thの初期値)
  • justify・・・両端揃え
  • char・・・指定文字揃え
valign="middle" セル内の縦方向の位置
  • top・・・上
  • middle・・・中央(初期値)
  • bottom・・・下
  • baseline・・・横方向の列での1行目のベースライン
char="" 位置を揃える文字の指定
charoff="" セルの左端からどの位置に文字を表示するか指定

対応ブラウザなどのデータ

形式 <thead>~</thead> カテゴリ なし
親要素 table 子要素 tr / script / template
開始タグ 必須 終了タグ 省略可能
汎用属性 accesskey / class / contenteditable / dir / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

align、char、charoff、valignの各属性は、HTML5では廃止。また<TFOOT>と<TBODY>の配置は、どちらが前でも良い事になった。