HTML <table> element

<TABLE> はテーブル(表)を作成するHTMLタグです。この記事では、HTMLで表を作成する方法をサンプルを交えてご紹介します。

<TABLE>

HTMLタグ<TABLE> は表を作成します。 表は大きく分けてヘッダ・ボディ・フッタの3つの部分から構成されています。 しかし、Microsoft Internet Explorer 6 ではこれらの扱いにとくに違いはありません。 表には<tr>タグで行を挿入します。行には<TH>タグ、または<TD>タグでセルを挿入します。<CAPTION>タグで見出しを付けることもできます。

<table>
  <!-- 0 or 1 caption element -->
  <!-- 0 or more colgroup elements -->
  <!-- 0 or 1 thead element -->
  <!-- either 0 or more tbody elements or one or more tr elements -->
  <!-- 0 or 1 tfoot element -->
</table>

構文

HTMLの場合、タグ名は大文字と小文字のどちらでもよい。XHTMLの場合、タグ名は小文字で記述する。

<table>
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>9900</td>
      <td>ゆうちょ銀行</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </tfoot>
</table>

上記のHTMLはウェブブラウザで次のように表示される。

金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
コード 金融機関

属性

次に示す属性を table 要素に指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
要素の識別子を指定する。
ondblclick
table 要素をダブルクリックしたとき実行する JavaScript を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

内容モデル

開始タグと終了タグの間には、以下に示す要素タイプを含めることができます。

TABLE要素タイプの内容モデル
要素タイプ 条件
CAPTION 現れないか、1回出現
COL 現れないか、任意回数出現
COLGROUP 現れないか、任意回数出現
THEAD 現れないか、1回出現
TFOOT 現れないか、1回出現
TBODY 1回以上出現
TR 現れないか、任意回数出現

中央寄せ

表(テーブル)のセルを中央寄せにするには、tdまたはth要素のstyle属性に「text-align: center;」を指定する。

CSS

border
境界線の太さ、種類および色を指定する。
<table style="border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-bottom
下の境界線の太さ、種類、色を指定するCSSプロパティ
<table style="border-bottom: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-collapse
隣のセルの枠線と重ねて表示する。
<table style="border-collapse: collapse">
  <tbody>
    <tr>
      <td style="border: 1px solid gray">0001</td>
      <td style="border: 1px solid gray">みずほ銀行</td>
    </tr>
    <tr>
      <td style="border: 1px solid gray">9900</td>
      <td style="border: 1px solid gray">ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>
0001 みずほ銀行
9900 ゆうちょ銀行
border-left
左の境界線の太さ、種類、色を指定するCSSプロパティ
<table style="border-left: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ
<table style="border-right: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-top
上の境界線の太さ、種類、色を指定するCSSプロパティ
<table style="border-top: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
margin
要素の外側の余白を指定する。

表の位置を中央揃えにする。

<table style="margin: auto">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行

tableに関するCSS

tableに適用できるCSSを次に示す。

<CAPTION>

HTMLタグ<caption>は表に見出しをつけます。

書式

<CAPTION [attribute=value ...] content-model </CAPTION>

開始タグ

caption要素の開始タグは省略できません。

終了タグ

caption要素の終了タグは省略できません。

開始タグと終了タグの間にはインライン要素を含めることができます。属性はすべて省略可能です。

TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。

属性

align
表の見出しの位置を指定します。省略した場合は、表の上に見出しが付きます。
意味
top上(規定値)
right
bottom
left
HTML 4.01 Transitional でのみ指定可能な属性です。 HTML 4.01 Strict や XHTML ではスタイルシート属性 caption-side を使用して見出しの位置を指定します。
class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
HTML文書内の要素で一意な識別子を指定する。
ondblclick
caption 要素をダブルクリックしたとき実行する JavaScript を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<COLGROUP>

<COLGROUP>と</COLGROUP>の間にある複数の<COL>タグをまとめて1つのグループにします。 複数の<COL>タグに対して、まとめて属性を指定するときに便利です。

書式

<COLGROUP [attribute=value ...] content-model </COLGROUP>

HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはCOL要素タイプが任意回数表れます。 TABLE要素タイプの内容モデルで、<table> と </table> の間に任意回数現れます。

属性

span
列の数を指定します。
width
列の幅を数値と単位で指定します。

<COL>

<COL> は表の列に属性を指定するHTMLタグです。 縦の1列に対してスタイル(文字の大きさや色など)を統一したい場合、ひとつひとつのセルに対してスタイルを指定しなくても <COL> タグを使用することで、縦の1列すべてのスタイルを統一することができます。 <COLGROUP>タグと</COLGROUP>タグで挟むことにより、複数の<COL>タグをグループ化することができます。

col要素に指定できるスタイルシートを次に示す。

col要素に指定したスタイルシートは、表のセル内にあるテキストに影響を及ぼさない。したがって、以下のスタイルシートを指定することはできない。

縦の列に対してスタイルシートを指定したい場合は、各セルのth要素td要素に対してひとつづつスタイルシートを指定するしかない。

書式

<COL [attribute=value ...] content-model </COL>

開始タグ

col要素の開始タグは省略できません。

終了タグ

col要素の終了タグは省略できます。

内容モデル

col要素の内容モデルは空です。開始タグと終了タグの間には何も現れません。

属性

span
列の数を指定します。
width
列の幅を数値と単位で指定します。

スタイルの優先順位は「td要素 > tr要素 > tbody要素 > col要素 > table要素」である。

<table>
  <col style="width: 4rem">
  <col style="width: 12rem">
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
  </tbody>
</table>
コード 金融機関
0001 みずほ銀行
0005 三菱UFJ銀行
0009 三井住友銀行

<THEAD>

表中の行をヘッダ・本体・フッタに分け、そのヘッダ部分であることを指定します。

印刷時にページの境界に跨るために表が分割されるとき、ヘッダをを各ページに複製するためにthead要素タイプを使用する。

TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。

書式

<THEAD [attribute=value ...] content-model </THEAD>

開始タグ

thead要素の開始タグは省略できません。

終了タグ

HTMLではthead要素の終了タグは省略できます。XHTMLではthead要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間には TR要素タイプが1つ以上出現します。

<TFOOT>

表中の行をヘッダ・本体・フッタに分け、そのフッタ部分であることを指定します。

印刷時にページの境界に跨るために表が分割されるとき、フッタをを各ページに複製するためにtfoot要素タイプを使用する。 TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。

書式

<TFOOT [attribute=value ...] content-model </TFOOT>

開始タグ

tfoot要素の開始タグは省略できません。

終了タグ

HTMLではtfoot要素の終了タグは省略できます。XHTMLではtfoot要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間には TR要素タイプが1回以上出現します。

<TBODY>

表中の行をヘッダ・本体・フッタに分け、その本体部分であることを指定します。

書式

<TBODY [attribute=value ...] content-model </TBODY>

開始タグ

tbody要素の開始タグは省略できます。

終了タグを省略できます。XHTMLでは省略できません。 TBODY要素タイプはTABLE要素タイプの内容モデルであり、<TABLE> と </TABLE> の間に0または1回出現します。

内容モデル

開始タグと終了タグの間には TR要素タイプが1回以上出現します。

TR

<TR>タグは表に行(Table Row)を挿入します。 行には<TH>タグ、または<TD>タグでセルを挿入します。 <TABLE>タグと</TABLE>タグの間に記述することができます。

書式

<TR [attribute=value ...] content-model </TR>

開始タグ

tr要素の開始タグは省略できません。

終了タグ

HTMLではtr要素の終了タグは省略できます。XHTMLではtr要素の終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはTH要素タイプまたはTD要素タイプが1回以上現れます。

TBODY要素タイプおよびTHEAD要素タイプ、TFOOT要素タイプの内容モデルで、<TBODY> と </TBODY> の間(または<THEAD> と </THEAD> の間や <TFOOT> と </TFOOT> の間)に1回以上出現します。

属性

bgcolor
行内セルの背景色を指定します。

HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。

tr要素の属性
属性 HTML 4.01
Transitional
HTML 4.01
Strict
XHTML 1.0
Strict
cellhalign OK OK OK
cellvalign OK OK OK
bgcolor OK NG NG

関連記事

参考文献

Web Hypertext Application Technology Working Group (2021) "Tabular data" HTML Living Standard