<table></table>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / パルパブル・コンテンツ
利用場所 フロー・コンテンツが置ける場所
内容 本文参照

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


<table>
<tr>
<th>見出しセル</th>
</tr>
<tr>
<td>データセル</td>
</tr>
</table>

属性
任意属性
border="" [!]レイアウト目的ではないことを示す 1 値は 1、または空文字列のみ

border属性の詳細については、下記のページを参考にしてください。

基本的な構成

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

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

要素の内容に関して

table要素の内容には、以下の要素をこの順序で配置する必要があります。(HTML5 と HTML 5.1では若干異なります)

HTML5
  1. caption要素を1つ(任意)
  2. colgroup要素を0個以上
  3. thead要素を1つ(任意)
  4. tfoot要素を1つ(任意)
  5. tbody要素を0個以上、またはtr要素を1つ以上
  6. tfoot要素を1つ(任意)
  • ただし、tfoot要素はどちらか1つだけしか配置できません。(2つを同時に配置することはできません)
HTML 5.1
  1. caption要素を1つ(任意)
  2. colgroup要素を0個以上
  3. thead要素を1つ(任意)
  4. tbody要素を0個以上、またはtr要素を1つ以上
  5. tfoot要素を1つ(任意)
  • tfoot要素は、tbody要素の前には配置できなくなりました。

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

<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>
HTML5における変更点
HTML 5.1における変更点

使用例

横に3つのセルを並べた例

<table border="1">
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
</tr>
</table>

表示例
データ1 データ2 データ3
3行の表を作成した例

<table border="1">
<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 border="1">
<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 border="1">
<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
border属性を省略した例

<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