<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要素の開始タグは省略できない。
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 要素に指定できる。
表(テーブル)のセルを中央寄せにするには、tdまたはth要素のstyle属性に「text-align: center;
」を指定する。
以下に示すCSSプロパティをtable要素に指定することができる。
<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-spacing: 16px 2px; border: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<table style="border-spacing: 2px 16px; border: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
<table style="border-top: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
11.6 表のキャプション及び注記処理
11.6.1 表のキャプション及び注記の配置位置及び組方向 表のキャプション及び注記の配置位置及び組方向は,次による。
a) キャプション及び注記の組方向は,表の全体の組方向と同一とする。
b) 表の全体が横書きのキャプションの配置位置は,表の全体の上側とし,表の全体の左右中央にそろえるか,又はキャプションの先頭を表の全体の左端からの指定された位置に配置する。表の全体が縦書きのキャプションの配置位置は,表の全体の右側とし,キャプションの先頭を表の全体の上端からの指定された位置に配置する。
表の上にキャプションを配置する例を次に示す。
<table style="caption-side: top">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
表の下にキャプションを配置する例を次に示す。
<table style="caption-side: bottom">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
空のセルを表示する例を次に示す。
<table style="empty-cells: show">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
空のセルを表示しない例を次に示す。
<table style="empty-cells: hide">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
表の位置を中央揃えにする。
<table style="margin: auto">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
表の横幅を固定値にする。
<table style="table-layout: fixed; width: 300px; border: 1px solid gray">
コード | 金融機関 |
---|---|
0001 | みずほ銀行 |
9900 | ゆうちょ銀行 |
HTMLタグ<caption>は表に見出しをつけます。
<caption>
<!-- Flow content, but with no descendant table elements. -->
</caption>
caption要素の開始タグは省略できません。
caption要素の終了タグは省略できません。
開始タグと終了タグの間にはインライン要素を含めることができます。属性はすべて省略可能です。
TABLE要素タイプの内容モデルであり、<table> と </table> の間に0回または1回だけ現れます。
値 | 意味 |
---|---|
top | 上(規定値) |
right | 右 |
bottom | 下 |
left | 左 |
表中の行をヘッダ・本体・フッタに分け、その本体部分であることを指定します。
<tbody>
<!-- Zero or more tr and script-supporting elements. -->
</tbody>
tbody要素の開始タグは省略できます。
終了タグを省略できます。XHTMLでは省略できません。 TBODY要素タイプはTABLE要素タイプの内容モデルであり、<TABLE> と </TABLE> の間に0または1回出現します。
開始タグと終了タグの間には TR 要素タイプが1回以上出現します。
以下に示す属性をtbody要素タイプに指定することができる。tbody要素タイプに必須な属性は無い。
Web Hypertext Application Technology Working Group (2022) "Tabular data" HTML Living Standard
日本産業標準調査会 (2022) 日本産業規格