HTML <table>

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

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

<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はウェブブラウザで次のように表示される。

開始タグ

table要素の開始タグは省略できない。

終了タグ

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

コンテンツモデル

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

属性

次に示す属性を 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>
• <col>
• <colgroup>
• <tbody>
• <td>
• <tfoot>
• <th>

参考文献

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

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