<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 |
- サイト内検索
