<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