<TABLE> はテーブル(表)を作成するHTMLタグです。この記事では、HTMLで表を作成する方法をサンプルを交えてご紹介します。
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 要素に指定できる。
開始タグと終了タグの間には、以下に示す要素タイプを含めることができます。
要素タイプ | 条件 |
---|---|
CAPTION | 現れないか、1回出現 |
COL | 現れないか、任意回数出現 |
COLGROUP | 現れないか、任意回数出現 |
THEAD | 現れないか、1回出現 |
TFOOT | 現れないか、1回出現 |
TBODY | 1回以上出現 |
TR | 現れないか、任意回数出現 |
表(テーブル)のセルを中央寄せにするには、tdまたはth要素のstyle属性に「text-align: center;
」を指定する。
<table style="border: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<table style="border-bottom: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<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 | ゆうちょ銀行 |
<table style="border-left: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<table style="border-right: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<table style="border-top: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
表の位置を中央揃えにする。
<table style="margin: auto">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
tableに適用できるCSSを次に示す。
HTMLタグ<caption>は表に見出しをつけます。
<CAPTION [attribute=value ...] content-model </CAPTION>
caption要素の開始タグは省略できません。
caption要素の終了タグは省略できません。
開始タグと終了タグの間にはインライン要素を含めることができます。属性はすべて省略可能です。
TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。
値 | 意味 |
---|---|
top | 上(規定値) |
right | 右 |
bottom | 下 |
left | 左 |
<COLGROUP>と</COLGROUP>の間にある複数の<COL>タグをまとめて1つのグループにします。 複数の<COL>タグに対して、まとめて属性を指定するときに便利です。
<COLGROUP [attribute=value ...] content-model </COLGROUP>
HTMLでは終了タグを省略できます。XHTMLでは省略できません。 開始タグと終了タグの間にはCOL要素タイプが任意回数表れます。 TABLE要素タイプの内容モデルで、<table> と </table> の間に任意回数現れます。
<COL> は表の列に属性を指定するHTMLタグです。 縦の1列に対してスタイル(文字の大きさや色など)を統一したい場合、ひとつひとつのセルに対してスタイルを指定しなくても <COL> タグを使用することで、縦の1列すべてのスタイルを統一することができます。 <COLGROUP>タグと</COLGROUP>タグで挟むことにより、複数の<COL>タグをグループ化することができます。
col要素に指定できるスタイルシートを次に示す。
col要素に指定したスタイルシートは、表のセル内にあるテキストに影響を及ぼさない。したがって、以下のスタイルシートを指定することはできない。
縦の列に対してスタイルシートを指定したい場合は、各セルのth要素やtd要素に対してひとつづつスタイルシートを指定するしかない。
<COL [attribute=value ...] content-model </COL>
col要素の開始タグは省略できません。
col要素の終了タグは省略できます。
col要素の内容モデルは空です。開始タグと終了タグの間には何も現れません。
スタイルの優先順位は「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要素タイプを使用する。
TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。
<THEAD [attribute=value ...] content-model </THEAD>
thead要素の開始タグは省略できません。
HTMLではthead要素の終了タグは省略できます。XHTMLではthead要素の終了タグは省略できません。
開始タグと終了タグの間には TR要素タイプが1つ以上出現します。
表中の行をヘッダ・本体・フッタに分け、そのフッタ部分であることを指定します。
印刷時にページの境界に跨るために表が分割されるとき、フッタをを各ページに複製するためにtfoot要素タイプを使用する。 TABLE要素タイプの内容モデルで、<TABLE> と </TABLE> の間に1回だけ出現します。
<TFOOT [attribute=value ...] content-model </TFOOT>
tfoot要素の開始タグは省略できません。
HTMLではtfoot要素の終了タグは省略できます。XHTMLではtfoot要素の終了タグは省略できません。
開始タグと終了タグの間には TR要素タイプが1回以上出現します。
表中の行をヘッダ・本体・フッタに分け、その本体部分であることを指定します。
<TBODY [attribute=value ...] content-model </TBODY>
tbody要素の開始タグは省略できます。
終了タグを省略できます。XHTMLでは省略できません。 TBODY要素タイプはTABLE要素タイプの内容モデルであり、<TABLE> と </TABLE> の間に0または1回出現します。
開始タグと終了タグの間には TR要素タイプが1回以上出現します。
<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回以上出現します。
HTMLのバージョンにより、指定できる属性が異なります。HTMLのバージョンごとに指定できる属性の一覧を次の表に示します。
属性 | 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