tableをスタイルシートでレイアウトする
何かと便利に使うことのできる「table」タグですが、このtableタグについてもスタイルシートで設定をすることができます。
- テーブルの境界線の表示方法を指定する
- テーブルのセル間隔を指定する
- 実際にテーブルをスタイルシート(CSS)で飾ってみる
table全体に関してのスタイルシート
テーブルの各セルの境界線やセル間隔など、テーブル全体に対してのスタイルシートの紹介です。
セルとセルとの間隔を指定する。
セルとセルとの間には上下と左右に間隔を指定することができます。
border-spacing:セル間隔① セル間隔②
セルの間隔の値は２つまで設定することができ、値が１つの場合は上下左右に、値が2つの場合は値①で上下、値②で左右のセル間隔を指定することができます。
＜記述例＞
【CSS記述】
table,th,td,tr{border: 1px solid #333}
table {width: 500px}
<!--上下左右に10pxのセル間隔を設ける-->
sample1{border-spacing:10px}
＜!--上下に5px 左右に10pxの間隔を設ける--＞
sample1{border-spacing:5px 10px}
【HTML記述】
<table border="1" class="sample1">
<tr>
<th colspan="2">上下左右に均等に10pxずつセル間隔を設ける</th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>
<table class="sample2">
<tr>
<th colspan="2"><p>左右に5px・上下に20pxのセル間隔を設ける</p></th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>
 |
 |
 |
|---|
