HTML <table> element

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

thead
tfoot
tbody

<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を次に示す。

border-spacing
caption-side
empty-cells
table-layout

<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要素に指定できるスタイルシートを次に示す。

background
background-color
background-image
background-repeat
background-attachment
background-position
width

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

color
font
font-style
font-variant
font-weight
font-size
font-family
border
border-top
border-right
border-bottom
border-left
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
text-align
vertical-align
padding
padding-top
padding-right
padding-bottom
padding-left

縦の列に対してスタイルシートを指定したい場合は、各セルの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

<th>
<td>

参考文献

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

HTML <table> element

<TABLE>

構文

属性

内容モデル

中央寄せ

CSS

tableに関するCSS

<CAPTION>

書式

開始タグ

終了タグ

属性

<COLGROUP>

書式

属性

<COL>

書式

開始タグ

終了タグ

内容モデル

属性

<THEAD>

書式

開始タグ

終了タグ

内容モデル

<TFOOT>

書式

開始タグ

終了タグ

内容モデル

<TBODY>

書式

開始タグ

内容モデル

TR

書式

開始タグ

終了タグ

内容モデル

属性

関連記事

参考文献