テーブル

テーブルの装飾

テーブルのHTML

HTML だけでは美しい見栄えのテーブルを作成出来ない。
そこで、 CSS を使って、より一般的と言えるテーブルの見栄えを設定してみる。
まず、枠線とセルの背景色を設定したテーブルを作成する。
HTML ではテーブルの見栄えは何も装飾しない。
特に、table タグに border 属性などの枠線の設定もしていないことに注目。

<table>
<caption>テーブル装飾の例</caption>
<tr>
<th>項目A</th><th>項目B</th><th>項目C</th>
</tr>
<tr>
<td>値1</td><td>値2</td><td>値3</td>
</tr>
<tr>
<td>値4</td><td>値5</td><td>値6</td></tr>
</table>

テーブルのCSS

CSS の記述では、table タグ、th タグ、td タグにスタイルを設定する。
まず、tableタグのスタイルでは、テーブルの外側の枠線を 2px に設定する。
そして、border-collapseプロパティを collapse に設定して枠線を結合する。
次の th タグでは、項目名のセルの枠線を 1px に設定し、背景色を設定する。
最後の td タグでは、値のセルの枠線を 1pxに設定する。
また、それぞれのセルの内側の余白は、padding プロパティで適度に設定しておくと読みやすくなる。

table {
width: 300px;
border: solid 2px black;
border-collapse: collapse; }
th {
padding: 8px;
border: solid 1px black;
background-color: lightblue;
}
td {
padding: 8px;
border: solid 1px black;
}