セルの境界線の間隔を指定する

border-spacing

CSSの書き方

border-spacing:値 値 ;

CSSの詳細情報
プロパティ名 border-spacing 読み方 ボーダー・スペーシング
初期値 0 意味 表の境界線の間隔調整
サイズ指定
対象 table(表)要素
CSSレベル CSSレベル2 対応ブラウザ Windows MAC
継承 する FF1.0/NS7.1/OP8.0 SF

解説

「border-spacing」プロパティは、表のセルの境界線同士の間隔を指定するスタイルシートです。「border」プロパティによって、境界線が表示されるように指定され、なおかつ「border-collapse」プロパティによって境界線が重なるように指定されていない場合に有効なプロパティです。

実際に空けたい間隔を数値で指定します。

値を1つ指定した場合は、すべての方向の境界線間隔に適用されます。

値を2つ指定した場合は、最初の値で「列(左右のセル)の間の間隔」を、2つめの値で「行(上下のセル)間の間隔」を指定します。

値を2つ指定する場合は、値同士を半角スペースで区切ります。

IEは非対応

InternetExplorerはこの「border-spacing」プロパティに対応していません。

CSS/HTMLサンプル

table { border-spacing:3px; width:350px; border:1px solid #666666; background:#f6f6f6;}
td { border:1px solid #666666; padding:2px; }

表の境界線の間隔を3ピクセル空ける サンプル

【厳選】合わせて読みたいおすすめ書籍

WEB制作支援サイトのHTMLタグボードだからオススメできる厳選書籍です。私が読んでいない本はオススメしません。

HTMLやCSS、Webデザインを体系的に学ぶなら

CSSを駆使したモダンなWebデザインを学ぶなら

最新情報をチェックしよう!