表（テーブル）に関するHTMLタグ

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

<TABLE>

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

構文

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
要素の識別子を指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

内容モデル

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

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

中央寄せ

表（テーブル）自体を中央寄せにするには、table要素のstyle属性に「margin: auto;」を指定する。

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

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

CSS

border
境界線の太さ、種類および色を指定する。 
<table style="border: 1px solid black;">
  <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>
</table>

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

金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-collapse
隣のセルの枠線との余白を指定する。 
<table style="border-collapse: collapse;">
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black;">0001</td>
      <td style="border: 1px solid black;">みずほ銀行</td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">9900</td>
      <td style="border: 1px solid black;">ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

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

金融機関コード
コード 金融機関
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 を使用して見出しの位置を指定します。

<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要素」である。

<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

表 (<TABLE>) に見出しセル（table header cell）を挿入します。<TD> タグで挿入する通常のセルと違い、文字が太字で表示されます。<TR>と</TR>の間に記述することができます。終了タグは省略できます。

書式

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

HTMLでは終了タグを省略できます。XHTMLでは終了タグを省略できません。

属性

属性はすべて省略可能です。

abbr
ヘッダセルのための略語を指定します。
bgcolor
セルの背景色を指定します。
width
セルの幅をピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。
height
セルの高さをピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。

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

th要素の属性
属性 HTML 4.01
Transitional 		HTML 4.01
Strict 		XHTML 1.0
Strict
abbr OK OK OK
axis OK OK OK
headers OK OK OK
scope OK OK OK
rowspan OK OK OK
colspan OK OK OK
cellhalign OK OK OK
cellvalign OK OK OK
nowrap OK NG NG
bgcolor OK NG NG
width OK NG NG
height OK NG NG

◎ …… 指定必須
○ …… 指定可能（省略可）
× …… 指定不可

<TD>

表 (<table>) にセル (table data cell) を挿入します。

書式

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

HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはブロック要素またはインライン要素が任意回数表れます。 TR要素タイプの内容モデルで、<tr> と </tr> の間に1回以上現れます。

属性

abbr
ヘッダセルのための略語を指定します。
bgcolor
セルの背景色を指定します。
colspan
セルをn個、横方向に連結します。
rowspan
セルをn個、縦方向に連結します。
width
セルの幅をピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。
height
セルの高さをピクセル単位かパーセンテージ単位で指定します。ピクセル単位で指定するときは px を省略できます。

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

td要素の属性
属性 HTML 4.01
Transitional 		HTML 4.01
Strict 		XHTML 1.0
Strict
abbr OK OK OK
axis OK OK OK
headers OK OK OK
scope OK OK OK
rowspan OK OK OK
colspan OK OK OK
cellhalign OK OK OK
cellvalign OK OK OK
nowrap OK NG NG
bgcolor OK NG NG
width OK NG NG
height OK NG NG

CSS

border
境界線の太さ、種類および色を指定する。 
<table>
  <caption>金融機関コード</caption>
  <thead>
    <tr>
      <th>コード</th>
      <th>金融機関</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black;">0001</td>
      <td style="border: 1px solid black;">みずほ銀行</td>
    </tr>
    <tr>
      <td style="border: 1px solid black;">9900</td>
      <td style="border: 1px solid black;">ゆうちょ銀行</td>
    </tr>
  </tbody>
</table>

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

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

HTMLタグ

HTMLタグには次のものがある。

参考文献

W3C (2021) "The table element" HTML Living Standard