構文

<table>
    <caption>・・・</caption>
    <thead>
        ：
    </thead>
    <tfoot>
        ：
    </tfoot>
    <tbody>
        ：
    </tbody>
</table>

説明文

　HTML文書内に表構造を作成する。表内の各セルはタグを入れ子状にして記述する。例えば，行を<tr>を利用して記述し，その中に<td>または<th>タグで列を記述する。また，colspanおよびrowspan属性を利用することでセル同士を結合することも可能である。

　表の本体は<tbody>・・・</tbody>タグ内に記載してゆく。ただし，<tbody>・・・</tbody>を記載せずに<tr>タグで表構造を記載しはじめた場合は，<tbody>・・・</tbody>タグが省略されていると見なされる。

　表の説明文は<caption>タグで記述する。

サンプル

HTMLソース

<table border="1" width="250" align="center">
 <caption>【テーブルの例】</caption>
 <thead>
  <tr bgcolor="#800000" style="color:#ffffff;">
    <th>Name</th>
    <th>列A</th>
    <th>列B</th>
    <th>列C</th>
  </tr>
 </thead>
 <tbody>
 <tr >
  <th>行1</th>
  <td>A1</td>
  <td colspan="2">B1-C1</td>
 </tr>
 <tr align="center">
  <th>行2</th>
  <td rowspan="2">A2-A3</td>
  <td colspan="2" rowspan="2">B2-C3</td>
 </tr>
 <tr align="center">
  <th>行3</th>
 </tr>
 </tbody>
</table>

ブラウザ表示例

【テーブルの例】
Name 列A 列B 列C
行1 A1 B1-C1
行2 A2-A3 B2-C3
行3

対応状況

HTML IE Firefox Opera
4 strict 4 Transitional 5 6 7 2 3 8 9
○ ○ ○ ○ ○ ○ ○ ○ ○

要素，タグ

タグ要素 ブロック要素
包括可能要素 <caption>（任意），<col>（任意），<colgroup>（任意），<thead>（任意），<tbody>（必須，省略可），<tfoot>（任意）
タグ記述条件 開始タグ：必須　終了タグ：必須

属性

よく利用する属性

属性 意味 対応
HTML 4s HTML 4t その他
align=配置位置 セル内の横方向における内容の配置位置を指定する。「left」で左揃え，「center」で中央揃え，「right」で右揃え，「justify」でセル内に均等になるように配置する。また，「char」を指定するとchar属性に従った配置を行う × ○ 　
border=太さ 罫線の太さを指定する。「0」を指定すると罫線を引かない ○ ○ 　
bgcolor=色 セル内の背景色を指定する。redやblueなどといった色名を指定できる。また，色の3原色を256階調（00からff）で指定することも可能。この際，「#赤緑青」の順に指定する。例えば，黄色であれば「#ffff00」と指定する × ○ 　
cellpadding=余白幅 セル内に表示する内容と罫線との余白を指定する。単位はピクセル ○ ○ 　
cellspacing=間隔 セル同士の間隔を指定する。単位はピクセル ○ ○ 　
width=幅 表の横幅を指定する。数値のみで指定すると単位がピクセルとなる。割合で指定する場合は「%」を末尾に付ける ○ ○ 　

その他の属性

属性 意味 対応
HTML 4s HTML 4t その他
class=クラス名 このタグのクラス名。CSSでスタイルを指定する場合などに利用される ○ ○ 　
dir=方向 タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する ○ ○ 　
frame=値 表の外枠の表示方法を指定する。「void」を指定すると外枠は表示しない。「above」で上線，「below」で下線，「lhs」で左線，「rhs」で右線をそれぞれ表示する。「hsides」で上下の線，「vsides」で左右の線をそれぞれ表示する。「box」または「border」を指定するとすべての外枠線を表示する ○ ○  
id=ID タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する ○ ○ 　
lang=言語 タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する ○ ○ 　
rules=値 表内のセルへの罫線の表示方法を指定する。「none」を指定すると罫線を表示しない。「rows」を指定すると各行の間のみ，「cols」を指定すると各列の間のみ罫線を表示する。「groups」を指定すると列グループ，行グループの間に罫線を表示する。「all」はすべてに罫線を表示する ○ ○ 　
style=スタイル タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 ○ ○ 　
summary=概要 表の概略を記載する。ここに記載した内容は音声ブラウザで説明のために読み上げるなどに利用される ○ ○ 　
title=タイトル タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する ○ ○ 　

マウスやキーボードの状況変化に関わる属性

属性 意味 対応
HTML 4s HTML 4t その他
onclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する ○ ○  
ondblclick=スクリプト このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する ○ ○  
onmousedown=スクリプト このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する ○ ○  
onmouseup=スクリプト このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する ○ ○  
onmouseover=スクリプト このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する ○ ○  
onmousemove=スクリプト このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する ○ ○  
onmouseout=スクリプト このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する ○ ○  
onkeypress=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する ○ ○  
onkeydown=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する ○ ○  
onkeyup=スクリプト このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する ○ ○  

セルの連結

　HTMLの表では，隣り合う複数のセル同士を結合して1つのセルとして扱うことが可能だ。セルを結合するには，初めに記述するセルのタグに「colspan」（縦方向）および「rowspan」（横方向）属性に結合するセル数を指定する。例えば，4つのセルを横方向に結合するには「<td rowspan="4">」と属性を指定する。また，colspanとrowspanを同時に設定することで，縦・横のセルを同時に結合できる。

　結合したセルの初めのタグ以外はすべて省略する。もし．結合したセルを考慮せずにタグを記述してしまうと，余分な行や列が作成され表示が乱れてしまう。

セル間の余白

　HTMLの表は標準でセル間に余白を設けるようになっている。もし余白がないとセル同士の内容は連続的の表示されてしまうため，どこからどこまでは1つのセルかを判断できなくなってしまうためだ。セル間の余白設定は「cellspacing」属性で設定を行う。

　<table>タグに何も属性を設定しないと以下のようにセル間に数ピクセル程度の余白は空く。

<table>
  <tr>
    <td>セル１</td>
    <td>セル２</td>
    <td>セル３</td>
  </tr>
  <tr>
    <td>セル４</td>>
    <td>セル５</td>
    <td>セル６</td>
  </tr>
  <tr>
    <td>セル７</td>
    <td>セル８</td>
    <td>セル９</td>
  </tr>
</table>
セル１ セル２ セル３
セル４ セル５ セル６
セル７ セル８ セル９

　もし，「cellspacing」を「0」にすると，余白がなくなりセルの範囲が分かりづらくなる。そのため，表をわかりやすくするためにcellspacingはある程度余白を確保した方がよい。

<table cellspacing="0">
  <tr>
    <td>セル１</td>
            ：（途中省略）
    <td>セル９</td>
  </tr>
</table>
セル１ セル２ セル３
セル４ セル５ セル６
セル７ セル８ セル９

　しかし，罫線を引くとcellspacingを確保していると，セル間の罫線に余分な余白が確保されてしまう。そのため，板チョコレートのようにそれぞれのセルが独立したような表示になってしまう。

<table border="1">
  <tr>
    <td>セル１</td>
            ：（途中省略）
    <td>セル９</td>
  </tr>
</table>
セル１ セル２ セル３
セル４ セル５ セル６
セル７ セル８ セル９

　もし，セル間にそれぞれ1本の罫線を引きたい場合は，cellspacingで余白をなくしてしまえばよい。

<table border="1" cellspacing="0">
  <tr>
    <td>セル１</td>
            ：（途中省略）
    <td>セル９</td>
  </tr>
</table>
セル１ セル２ セル３
セル４ セル５ セル６
セル７ セル８ セル９

　また，スタイル・シートの「border-collapse」で「collapse」を指定すると，同様にセルが接続され余分な余白が空かないようになる。

関連項目