border-spacing/セル間隔

説明

　表(テーブル)はデフォルトでは二重線になります。これは下図の水色で塗りつぶした部分のようにセル間に間があるためです。border-spacingを使うとこの間隔を広げたり狭めたり出来ます。

　セル間隔のため、border-collapseでデフォルトのseparateが指定されている必要があります。collapseが指定されていると間隔自体がなくなるため、border-spacingは有効になりません。

　尚、IE7等古いブラウザではborder-spacingは使えません。

構文

　border-spacingプロパティの構文は以下の通りです。

border-spacing: 横間隔 縦間隔;

　間隔はpx指定のピクセル、em指定の文字数等が可能です。

　上記では横と縦を別々に指定する方法ですが、1つだけ指定も可能です。その場合は横の間隔と縦の間隔は同じになります。

利用例

　border-spacingの利用例です。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

table {
border-spacing: 10px 0.1em;
}

<table border=1>
<tr>
<th>題1</th>
<th>題2</th>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
<tr>
<td>データ3</td>
<td>データ4</td>
</tr>
</table>

　横は10px、縦は0.1文字分の間隔が出来ています。

　同じ表で縦横を1度に指定する例は以下の通りです。

table {
border-spacing: 1px;
}

　上記は以下のように表示されます。

　横のセル間も縦のセル間も2pxになっています。

補足

　間隔を0pxに指定するとborder-collapseでcollapseを指定したのと同じになりそうですが、表示は違います。

　以下はborder-spacingで0pxを指定した時です。

　次はとborder-collapseでcollapseを指定した時です。

　border-spacingで0pxを指定してもセル間自体は存在するため、二重線が1つにくっついたように表示されますが、border-collapseでcollapseを指定するとセル間自体がなくなるため、細い線で表示されています。

関連ページ

・ホームページ作成「表の挿入」

　表の表示方法だけでなく、罫線の表示、罫線を1重線にする方法、罫線の太さと色を変える方法、幅の指定、センタリング、の背景と文字の色を変える方法、セルの結合等について説明しています。

・ホームページ作成「スタイルシートの定義方法」

　外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る