<table></table>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 本文参照

table要素は、表の大枠を表します。この要素内には、表を構成する各要素を配置していくことになります。


<table>
<tr>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
</tr>
</table>
属性 値
廃止属性（HTML Living Standardでは未定義）
border="" ［×］レイアウト目的でないことを示す 1 値は 1、または空文字列のみ
  • border属性は、現行のHTMLでは廃止されました。

基本的な構成

表の基本的な構成は、表の大枠、行、セル、この3つの要素で成り立っています。

table要素 <table> ～ </table>
表の大枠を表します。表に関連するすべての要素は、この要素の中に配置することになります。
tr要素 <tr> ～ </tr>
表の行を表します。例えば、3行の表を作成する場合は、この要素を3つ配置することになります。
td要素 <td> ～ </td>
表のセル（データセル）を表します。例えば、横に3つのセルを並べたい場合は、各行（tr要素）の中にこの要素を3つ配置することになります。
th要素 <th> ～ </th>
表のセル（見出しセル）を表します。td要素の代わりにこの要素を使用すると、そのセルが見出しとして扱われます。
  • 上記の他に、表のキャプションを表す要素、列を表す要素、行や列をグループ化する要素が用意されています。

要素の内容に関して

table要素の内容には、以下の要素をこの順序で配置する必要があります。

  1. 任意でcaption要素を1つ
  2. colgroup要素を0個以上
  3. 任意でthead要素を1つ
  4. tbody要素を0個以上、またはtr要素を1つ以上
  5. 任意でtfoot要素を1つ

具体的なコードは次のような感じになります。

<table>

<caption>表のタイトル</caption>

<colgroup>
列グループ
</colgroup>

<thead>
ヘッダの行グループ
</thead>

<tbody>
本体の行グループ
</tbody>

<tfoot>
フッタの行グループ
</tfoot>

</table>

<table>

<caption>表のタイトル</caption>

<tr>
1行目
</tr>

<tr>
2行目
</tr>

<tr>
3行目
</tr>

</table>
旧HTMLからの変更点
  • HTML5：summary属性、width属性、frame属性、rules属性、cellspacing属性、cellpadding属性、align属性、bgcolor属性が廃止されました。
  • HTML5：border属性の定義が変わりました。（境界線の表示 → レイアウト目的でないことを示す）
  • HTML5：border属性に 1 または空文字以外を指定できなくなりました。
  • HTML5：table要素の直下にcol要素を配置できなくなりました。
  • HTML5：tbody要素の後にtfoot要素を配置できるようになりました。（以前は thead → tfoot → tbody の順で配置することになっていた）
  • HTML5.1：tbody要素の前にはtfoot要素を配置できなくなりました。
  • HTML LS：border属性が廃止されました。

使用例

横に3つのセルを並べた例
  • デフォルトでは表の境界線が表示されません。

<table>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>
表示例
データ1 データ2 データ3
3行の表を作成した例
  • これ以降の例では、次のスタイルシートを指定して表の境界線を表示しています。
-----
table, th, td {
border: 1px #000000 solid;
}
-----


<table>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
</table>
表示例
データ1-1 データ1-2 データ1-3
データ2-1 データ2-2 データ2-3
データ3-1 データ3-2 データ3-3
1行目を見出しに指定した例

<table>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
<tr>
<td>データ1-1</td>
<td>データ2-1</td>
<td>データ3-1</td>
</tr>
<tr>
<td>データ1-2</td>
<td>データ2-2</td>
<td>データ3-2</td>
</tr>
</table>
表示例
見出し1 見出し2 見出し3
データ1-1 データ2-1 データ3-1
データ1-2 データ2-2 データ3-2
1列目を見出しに指定した例

<table>
<tr>
<th>見出し1</th>
<td>データ1-1</td>
<td>データ1-2</td>
</tr>
<tr>
<th>見出し2</th>
<td>データ2-1</td>
<td>データ2-2</td>
</tr>
<tr>
<th>見出し3</th>
<td>データ3-1</td>
<td>データ3-2</td>
</tr>
</table>
表示例
見出し1 データ1-1 データ1-2
見出し2 データ2-1 データ2-2
見出し3 データ3-1 データ3-2