HTML の <table> タグ

<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要素の開始タグは省略できない。

終了タグ

table要素の終了タグは省略できない。

コンテンツモデル

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

table要素のコンテンツモデル
子要素 個数
caption 0個または1個
colgroup 0個以上
col 0個以上（colgroup要素にspan属性を指定した場合は0個）
thead 0個または1個
tbody 0個以上
tr 1個以上（tbody要素がある場合は0個）
tfoot 0個または1個
script 0個以上
template 0個以上

属性

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

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

中央寄せ

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

CSS

以下に示すCSSプロパティをtable要素に指定することができる。

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-spacing
表の境界線とセルとの間隔を指定する。 
<table style="border-spacing: 16px 2px; border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行 
<table style="border-spacing: 2px 16px; border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
border-top
上の境界線の太さ、種類、色を指定するCSSプロパティ 
<table style="border-top: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
caption-side
表のキャプションの位置を指定する。なお、「JISX4051 日本語文書の組版方法」において、表のキャプションは表の上に配置するよう決められている。

11.6 表のキャプション及び注記処理

11.6.1 表のキャプション及び注記の配置位置及び組方向 表のキャプション及び注記の配置位置及び組方向は，次による。

a) キャプション及び注記の組方向は，表の全体の組方向と同一とする。

b) 表の全体が横書きのキャプションの配置位置は，表の全体の上側とし，表の全体の左右中央にそろえるか，又はキャプションの先頭を表の全体の左端からの指定された位置に配置する。表の全体が縦書きのキャプションの配置位置は，表の全体の右側とし，キャプションの先頭を表の全体の上端からの指定された位置に配置する。

表の上にキャプションを配置する例を次に示す。

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

表の下にキャプションを配置する例を次に示す。

<table style="caption-side: bottom">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
empty-cells
空のセルの表示方法を指定する。

空のセルを表示する例を次に示す。

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

空のセルを表示しない例を次に示す。

<table style="empty-cells: hide">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
margin
要素の外側の余白を指定する。

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

<table style="margin: auto">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行
table-layout
表の横幅を指定する。

表の横幅を固定値にする。

<table style="table-layout: fixed; width: 300px; border: 1px solid gray">
金融機関コード
コード 金融機関
0001 みずほ銀行
9900 ゆうちょ銀行

<CAPTION>

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

書式

<caption>
  <!-- Flow content, but with no descendant table elements. -->
</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のプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

HTML <tbody> element

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

書式

<tbody>
  <!-- Zero or more tr and script-supporting elements. -->
</tbody>

開始タグ

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

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

内容モデル

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

属性

以下に示す属性をtbody要素タイプに指定することができる。tbody要素タイプに必須な属性は無い。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
id
要素毎に固有な識別子を指定する。識別子はCSSやJavaScriptから要素を識別するときに利用する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

関連記事

参考文献

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

日本産業標準調査会 (2022) 日本産業規格