tableをスタイルシートでレイアウトする
何かと便利に使うことのできる「table」タグですが、このtableタグについてもスタイルシートで設定をすることができます。
- テーブルの境界線の表示方法を指定する
- テーブルのセル間隔を指定する
- 実際にテーブルをスタイルシート(CSS)で飾ってみる
tableに関してのスタイルシート
テーブルの各セルの境界線やセル間隔など、テーブル全体に対してのスタイルシートの紹介です。
テーブルの境界線の表示方法を設定する。
テーブルの境界線の表示方法の指定には
border-collapse:表示方法の指定
というスタイルを設定します。
表示方法の指定には、下の2種類があります。
記述例 | 説明 |
---|---|
collapse | 境界線を重ねて表示する (※初期設定) |
separate | 境界線の間隔を空けて表示する |
それでは、実際に記述してみましょう。
<記述例>
【CSS記述】
table {width: 500px;}
table,th,td,tr{
border: 1px solid #333;
}
<!--境界線を重ねて表示--!>
.sam1{border-collapse:collapse}
<!--境界線の間隔を空けて表示--!>
.sam2{border-collapse:separate}
【HTML記述】
<table border="1" class="sam1">
<tr>
<th colspan="2">※sample1 (border-collapse:collapse)の場合</th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>
<table border="1" class="sam2">
<tr>
<th colspan="2">※sample2. (border-collapse:separate)の場合</th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td>セル4</td>
</tr>
</table>