【HTML】tableタグで表を書いてみよう
ここでは、HTMLでtableタグでの表の書き方をまとめています。
HTMLで表をはじめて書く時は、使うタグが多くてちょっと混乱しますが、基本の構造は大枠の「table」と、あとは3つのタグだけです。
表の行となる「tr」。
行のセルとなる「td」。
見出しや項目となる「th」。
順番に見ていきましょう。
tableタグで表の書き方
HTMLで表を表現するには、まず表になる範囲を<table>～</table>タグで囲みます。
<table>～</table>は、表を表すためのタグです。
<table>
</table>
つぎに表の1行となる部分を<tr>～</tr>タグで囲みます。
<tr>～</tr>は「table row」の略で、表の行を表します。
作りたい行の数だけセットします。
<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
さらに、行の中でセル（1マス）になる部分を<td>～</td>タグで囲みます。
<td>～</td>は「table data」の略で、表のデータや内容を表します。
こちらも作りたいセルの数だけセットしますが、表なので全ての行に同じ数だけセットします。
これで、<td>～</td>タグの中に文字などを書けば、表として表示されます。
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
表に見出しや項目をつける場合は、<th>～</th>タグを使います。
<th>～</th>は「table header」の略で、表の見出しや項目を表します。
<th>～</th>タグの中に書いたテキストが見出しとして表示されます。
上に見出しをつける場合、こうなります。
<table>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
表のサンプル
毎度HTMLでタグを打つのは大変なので、コピペ用にサンプルを置いておきます。
表は見やすいようにCSSで装飾してあるので、お好みでアレンジしてくださいね。
table, td, th{
border-collapse: collapse;
border-spacing: 0;
border: 1px #888 solid;
background: #fcfcfc;
}
td, th{
padding: 10px;
}
th{
background: #9dd;
}
tr:nth-child(even) td{
background: #eee;
}
表の装飾（アレンジ）については、こちらで書き方をまとめています。
上に見出しのある表
まずは、上だけに見出しのある表です。
| 見出しA | 見出しB | 見出しC |
|---|---|---|
| 内容1 | 内容2 | 内容3 |
| 内容1 | 内容2 | 内容3 |
| 内容1 | 内容2 | 内容3 |
<table>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
左側に見出しのある表
つぎに、左側だけに見出しのある表です。
| 見出しA | 内容1 | 内容2 | 内容3 |
|---|---|---|---|
| 見出しB | 内容1 | 内容2 | 内容3 |
| 見出しC | 内容1 | 内容2 | 内容3 |
<table>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
</table>
上と左側に見出しのある表
上と左側の両方に見出しのある表はこちら。
上と左側の両方に見出しをつける場合は、交点になる左上の1マスには何も書かず、空白とします。
| 見出しA | 見出しB | 見出しC | |
|---|---|---|---|
| 見出しA | 内容1 | 内容2 | 内容3 |
| 見出しB | 内容1 | 内容2 | 内容3 |
| 見出しC | 内容1 | 内容2 | 内容3 |
<table>
<tr><th>※ここは空にする</th><th></th><th></th><th></th></tr>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
<tr><th></th><td></td><td></td><td></td></tr>
</table>
大きな表をスクロールで表示したいとき、表の項目だけ固定する装飾の仕方もあります。
くわしくはこちらでまとめています。
