表を作ろう
使用するタグ
表を作るには<table>、<tr>、<th>、<td>を使用します。tr は「Table Row」、th は「Table Header」、td は「Table Data」の略です。
タグの使い方
<table>で表全体を囲む<tr>で表の１行を囲み、tr 内のセル数はすべての行で同じにする<th>で表の見出しとなるセルを作成する ※見出しセルはなくてもよい<td>で表のデータとなるセルを作成する
やってみよう
表の構成
サンプル：
<table>
<tr>
<th>名称</th>
<th>産地</th>
</tr>
<tr>
<td>バナナ</td>
<td>フィリピン</td>
</tr>
<tr>
<td>キウイフルーツ</td>
<td>ニュージーランド</td>
</tr>
</table>実行結果：
| 名称 | 産地 |
|---|---|
| バナナ | フィリピン |
| キウイフルーツ | ニュージーランド |
表に行を追加する
<table>
<tr>
<th>名称</th>
<th>産地</th>
</tr>
<tr>
<td>バナナ</td>
<td>フィリピン</td>
</tr>
<tr>
<td>キウイフルーツ</td>
<td>ニュージーランド</td>
</tr>
<tr>
<td>ブルーベリー</td>
<td>カナダ</td>
</tr>
</table>実行結果：
| 名称 | 産地 |
|---|---|
| バナナ | フィリピン |
| キウイフルーツ | ニュージーランド |
| ブルーベリー | カナダ |
表に列を追加する
サンプル：
<table>
<tr>
<th>名称</th>
<th>産地</th>
<th>値段</th>
</tr>
<tr>
<td>バナナ</td>
<td>フィリピン</td>
<td>100 円</td>
</tr>
<tr>
<td>キウイフルーツ</td>
<td>ニュージーランド</td>
<td>400 円</td>
</tr>
</table>実行結果：
| 名称 | 産地 | 値段 |
|---|---|---|
| バナナ | フィリピン | 100 円 |
| キウイフルーツ | ニュージーランド | 400 円 |
見出しセルを先頭の行以外で使用する
サンプル：
<table>
<tr>
<th>名称</th>
<th>産地</th>
<th>値段</th>
</tr>
<tr>
<th>バナナ</th>
<td>フィリピン</td>
<td>100 円</td>
</tr>
<tr>
<th>キウイフルーツ</th>
<td>ニュージーランド</td>
<td>400 円</td>
</tr>
<tr>
<th>ブルーベリー</th>
<td>カナダ</td>
<td>500 円</td>
</tr>
</table>実行結果：
| 名称 | 産地 | 値段 |
|---|---|---|
| バナナ | フィリピン | 100 円 |
| キウイフルーツ | ニュージーランド | 400 円 |
| ブルーベリー | カナダ | 500 円 |
表を縦方向に結合する
サンプル：
<table>
<tr>
<th>名称</th>
<th>産地</th>
</tr>
<tr>
<td>バナナ</td>
<td>フィリピン</td>
</tr>
<tr>
<td>グリーンキウイ</td>
<td rowspan="2">ニュージーランド</td>
</tr>
<tr>
<td>ゴールドキウイ</td>
</tr>
<tr>
<td>ブルーベリー</td>
<td>カナダ</td>
</tr>
</table>実行結果：
| 名称 | 産地 |
|---|---|
| バナナ | フィリピン |
| グリーンキウイ | ニュージーランド |
| ゴールドキウイ | |
| ブルーベリー | カナダ |
表を横方向に結合する
サンプル：
<table>
<tr>
<th>名称</th>
<th colspan="3">カロリー</th>
</tr>
<tr>
<td>バナナ</td>
<td>1 本</td>
<td>100 g</td>
<td>86 kcal</td>
</tr>
<tr>
<td>食パン</td>
<td>1 枚</td>
<td>80 g</td>
<td>208 kcal</td>
</tr>
<tr>
<td>ご飯</td>
<td>1 杯</td>
<td>150 g</td>
<td>252 kcal</td>
</tr>
</table>実行結果：
| 名称 | カロリー | ||
|---|---|---|---|
| バナナ | 1 本 | 100 g | 86 kcal |
| 食パン | 1 枚 | 80 g | 208 kcal |
| ご飯 | 1 杯 | 150 g | 252 kcal |
表にキャプション（タイトル）をつける
サンプル：
<table>
<caption>私の好きなフルーツ</caption>
<tr>
<th>名称</th>
<th>産地</th>
<th>値段</th>
</tr>
<tr>
<td>バナナ</td>
<td>フィリピン</td>
<td>100 円</td>
</tr>
<tr>
<td>キウイフルーツ</td>
<td>ニュージーランド</td>
<td>400 円</td>
</tr>
<tr>
<td>ブルーベリー</td>
<td>カナダ</td>
<td>500 円</td>
</tr>
</table>実行結果：
| 名称 | 産地 | 値段 |
|---|---|---|
| バナナ | フィリピン | 100 円 |
| キウイフルーツ | ニュージーランド | 400 円 |
| ブルーベリー | カナダ | 500 円 |
表の行をグループ分けする
<thead>、<tbody>、<tfoot>で表の行をグループ分けする。
サンプル：
<table>
<caption>私の好きなフルーツ</caption>
<thead>
<tr>
<th>名称</th>
<th>産地</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<th>バナナ</th>
<td>フィリピン</td>
<td>100 円</td>
</tr>
<tr>
<th>キウイフルーツ</th>
<td>ニュージーランド</td>
<td>400 円</td>
</tr>
<tr>
<th>ブルーベリー</th>
<td>カナダ</td>
<td>500 円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計</th>
<td>1,000 円</td>
</tr>
</tfoot>
</table>実行結果：
| 名称 | 産地 | 値段 |
|---|---|---|
| バナナ | フィリピン | 100 円 |
| キウイフルーツ | ニュージーランド | 400 円 |
| ブルーベリー | カナダ | 500 円 |
| 合計 | 1,000 円 | |
表の列をグループ分けする
<colgroup>で列の行をグループ分けする。
サンプル：
<table>
<caption>私の好きなフルーツ</caption>
<thead>
<tr>
<th>名称</th>
<th>産地</th>
<th>値段</th>
</tr>
</thead>
<tbody>
<tr>
<th>バナナ</th>
<td>フィリピン</td>
<td>100 円</td>
</tr>
<tr>
<th>キウイフルーツ</th>
<td>ニュージーランド</td>
<td>400 円</td>
</tr>
<tr>
<th>ブルーベリー</th>
<td>カナダ</td>
<td>500 円</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">合計</th>
<td>1,000 円</td>
</tr>
</tfoot>
</table>実行結果：
| 名称 | 産地 | カロリー | 値段 | ||
|---|---|---|---|---|---|
| バナナ | フィリピン | 1 本あたり | 100 g | 86 kcal | 100 円 |
| キウイフルーツ | ニュージーランド | 1 個あたり | 100 g | 54 kcal | 400 円 |
| ブルーベリー | カナダ | 20 粒あたり | 40 g | 20 kcal | 500 円 |
| 合計 | 1,000 円 | ||||
表の列をもっと細かくグループ分けする
準備中です...