<table></table> <tr></tr> <td></td> <th></th>

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類
要素

table要素で、表を作成することができます。

表内の行とセルは、table要素内に配置するtr要素td要素th要素)で示します。


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

見出しセル 見出しセル 見出しセル
データセル データセル データセル
データセル データセル データセル

[表作りのイメージ]

table要素 <table></table>

表の大枠を示す要素です。表の大きさや罫線などは、この要素の属性で設定することになります。

tr要素 <tr></tr>

表の行を示す要素です。例えば、3行の表を作成する場合は、この要素を3つ配置することになります。

td要素 <td></td>

表のセル(データセル)を示す要素です。例えば、横に3つのセルを並べたい場合は、各行(tr要素)の中にこの要素を3つ配置します。

th要素 <th></th>

表のセル(見出し用のセル)を示す要素です。td要素の代わりにこの要素を使用すると、そのセルが見出しとして扱われます。

一般的なブラウザでは、この要素内の文字列は太字になり、セル内のセンターに表示されます。

tbody要素について

HTML 4.01では、table要素内にtbody要素(行をグループ化する要素)を配置することが必須とされています。

<table>
<tbody>
<tr>
<td>表の内容</td>
</tr>
</tbody>
</table>

しかし、条件によっては、tbody要素の開始タグと終了タグの記述を省略することが可能です。詳しくは行をグループ化するをご覧ください。

使用例

以下の例では、border属性を指定して罫線を表示しています。

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

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

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

<table border="3">
<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="3">
<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="3">
<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