CSS2: border-spacing プロパティ - テーブル要素のセル境界の間隔

■ 概要

項　　目説　　明
記述形式
  1. セレクタ {border-spacing: 値 }， 　　　　　　値：　左右上下両方向
  2. セレクタ {border-spacing: 値1　値2 }， 　　値1：　左右方向，　値2：　上下方向
値 の形式 　値：　数値（長さ），inherit，　　値1，値2：　数値（長さ）
初 期 値 0
対応ブラウザー C2+ / e8+ / N2+ / Fx1+ / Op4+ / Ch1+ / Sa1+
適用可能な要素 <table>
継　　承 する

■ 解説

border-spacingプロパティ は，table要素について隣り合うセルの 境界線の間隔 を指定します。

ただし，table要素 に padding が指定されていると， テーブルの周辺の境界線とその内側にあるセル境界までの間隔は，それを加えた値になります。

なお，上に示した入力形式の 1 ～ 2 では，それぞれ，値 と 値1，値2 は，つぎの意味になります。

  1. 値 が左右上下すべての境界の間隔となる。
  2. 値1 が左右の境界の間隔，値2 が上下の境界の間隔となる。

数値による長さは，次のような単位を付けて指定します。

単位説　　明
px
px とは画面の１画素（ピクセル） のサイズを１とする単位です。　実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。
em
em とは現在使用中の標準フォントの高さを１とする単位です。　
ex
ex とは現在使用中の標準フォントの小文字の｢x｣の高さを１とする単位です。

W3C の CSS current work によると，現在，CSS3 を対象とした CSS Tables Level 3 のワーキンググループは活動しておらず，現状では，table要素 に関する資料は， 2011年6月7日に勧告された CSS2.1 の もの しかありません。

このプロパティは，CSS3 では廃止される可能性がありますので， とくに必要としない場合は使用しない方が無難です。

■ 使用例　（ border-spacingプロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
   table.sample1 { 
      border-collapse: separate;
      border-spacing: 3px;
      padding: 3px;
      border: solid 1px #999999; }
   table.sample2 { 
      border-collapse: separate;
      border-spacing: 6px;
      padding: 3px;
      border: solid 1px #999999; }
   table.sample3 { 
      border-collapse: collapse;
      border-spacing: 6px;
      padding: 3px;
      border: solid 1px #999999; }
-->
</style>
HTML
<body> ～ </body>		 
<table class="sample1" style="float: left">
 <caption>border-spacing: 3px;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<table class="sample2" style="float: left; margin-left: 30px;">
 <caption>border-spacing: 6px;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<table class="sample3" style="float: left; margin-left: 30px;">
 <caption>border-collapse: collapse;</caption>
 <tr><th>■■</th><th>●●</th><th>▲▲</th></tr>
 <tr><td>□□</td><td>◎◎</td><td>△△</td></tr>
 <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr>
</table>
<br style="clear: left">

ブラウザー 表示例
border-spacing: 3px;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
border-spacing: 6px;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
border-collapse: collapse;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽

なお，この例では，テーブルの周辺の境界線とその内側にあるセル境界までの間隔は， padding の値 3px を加えた値となり，内部のセル同士の 間隔より大きくなっています。

また，border-collaps プロパティの値を collaps に指定すると，table要素の border-spacing や padding の指定は無効になります。

■ 備考

【参考ページ】