表の作成
table要素
表を作成するときはtableを使用します。後からでも表の構成（列や行の数）を変更することが可能です。行の追加は簡単ですが列の追加は面倒な場合が多いです。
<table>から</table>の間に<tr><td></td></tr>を挿入することで1行1列の表を作成できます。
<td></td>が一枡（1つのセル）になり、横に必要な数だけ<td></td>を増やします。
<tr>は列の始まりに</tr>は列の終りにつけます。<tr>から</tr>までが1列になります。
1行1列の表
<table border="1">
<tr><td>表のデータ</td></tr>
</table>
| 表のデータ |
borderは外枠線の幅の数値です。
1行2列の表
<table border="1">
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
tableの中には最低1組の<tr></tr>が必要です。
3行2列の表
<table border="1">
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
複数行の場合trの中に含まれるtdのペアの数は原則同じでなければなりません。
1行目が見出しの場合
<table border="1">
<tr><th>表のデータ</th><th>表のデータ</th></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
|---|---|
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
見だしセルはtdの代わりにthを使用します。
1列目が見出しの場合
<table border="1">
<tr><th>表のデータ</th><td>表のデータ</td></tr>
<tr><th>表のデータ</th><td>表のデータ</td></tr>
<tr><th>表のデータ</th><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
|---|---|
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
1行目の2つのセルを横に結合
<table border="1">
<tr><th colspan="2">表のデータ</th></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | |
|---|---|
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
行方向にセルを結合するときはcolspanを使用します。
1列目の3つのセルを縦に結合
<table border="1">
<tr><th rowspan="3">表のデータ</th><td>表のデータ</td></tr>
<tr><td>表のデータ</td></tr>
<tr><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
|---|---|
| 表のデータ | |
| 表のデータ |
列方向にセルを結合するときは rowspanを使用します。
右上2行2列を結合
<table border="1">
<tr><td>表のデータ</td><td colspan="2" rowspan="2">表のデータ</td></tr>
<tr><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ | |
| 表のデータ | ||
| 表のデータ | 表のデータ | 表のデータ |
<td></td>の数に注目してください。
表のタイトル
<table border="1">
<caption>表のタイトル</caption>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
<caption>は<table>の直後に記述します。
サマリー
<table border="1" summary="○○についての表。1列目が見だし、2列目が値">
<caption>表のタイトル</caption>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
テーブルの目的・内容と、テーブルがどのように構成されているか、非視覚系のブラウザ（音声ブラウザ等）では読み上げてくれることがある。
3行2列の表ボーダー間隔の設定
<table border="1" cellspacing="10">
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr;><td>表のデータ</td><td>表のデータ</td></tr>
<tr;><td>表のデータ</td><td;>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
3行2列の表セルとセルのデーターとの間隔の設定
<table border="1" cellpadding="10">
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr;><td>表のデータ</td><td>表のデータ</td></tr>
<tr;><td>表のデータ</td><td;>表のデータ</td></tr>
</table>
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
3行2列の表ボーダーカラーの設定
<table border="1" bordercolor="#00FF00"><!-- html4.01strictではbordercolorは非推奨 -->
<tr><td>表が緑</td><td>表が緑</td></tr>
<tr bordercolor="#FF0000"><td>trが赤</td><td>trが赤</td></tr>
<tr bordercolor="#FF0000"><td>trが赤</td><td bordercolor="#0000FF">tdが青</td></tr>
</table>
| 表が緑 | 表が緑 |
| trが赤 | trが赤 |
| trが赤 | tdが青 |
ブラウザによりtr tdの色が反映されないことがあります。
3行2列の表tbodyの使用
<table border="1">
<tbody>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</tbody>
</table>
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
<tbody></tbody>の間にすべてのtrを含める。html4.01では必須ですが開始終了ともに省略できるので使用しないことが多い。
3行2列の表thead tbody tfootの使用
<table border="1">
<thead>
<tr><th>見出し</th><th>見出し</th></tr>
</thead>
<tfoot>
<tr><td>フッター</td><td>フッター</td></tr>
</tfoot>
<tbody>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
<tr><td>表のデータ</td><td>表のデータ</td></tr>
</tbody>
</table>
| 見出し | 見出し |
|---|---|
| フッター | フッター |
| 表のデータ | 表のデータ |
| 表のデータ | 表のデータ |
<thead></thead>は表の見出し部分をグループ化する。
<tfoot></tfoot>は表のフッター部分をグループ化する。
<tbody></tbody>は表のボディ部分をグループ化する。
記述順はthead,tfoot,tbodyになるので注意が必要
