項 目 | 説 明 |
---|---|
記述形式 |
|
値 の形式 | 値: 数値(長さ),inherit, 値1,値2: 数値(長さ) |
初 期 値 | 0 |
対応ブラウザー | C2+ / e8+ / N2+ / Fx1+ / Op4+ / Ch1+ / Sa1+ |
適用可能な要素 | <table> |
継 承 | する |
border-spacingプロパティ は,table要素について隣り合うセルの 境界線の間隔 を指定します。
ただし,table要素 に padding が指定されていると, テーブルの周辺の境界線とその内側にあるセル境界までの間隔は,それを加えた値になります。
なお,上に示した入力形式の 1 ~ 2 では,それぞれ,値 と 値1,値2 は,つぎの意味になります。
数値による長さは,次のような単位を付けて指定します。
単位 | 説 明 |
---|---|
px | px とは画面の1画素(ピクセル) のサイズを1とする単位です。 実際に表示されるサイズは 72dpi や 96dpi といったモニタの解像度により変化します。 |
em | em とは現在使用中の標準フォントの高さを1とする単位です。 |
ex | ex とは現在使用中の標準フォントの小文字の「x」の高さを1とする単位です。 |
W3C の CSS current work によると,現在,CSS3 を対象とした CSS Tables Level 3 のワーキンググループは活動しておらず,現状では,table要素 に関する資料は, 2011年6月7日に勧告された CSS2.1 の もの しかありません。
このプロパティは,CSS3 では廃止される可能性がありますので, とくに必要としない場合は使用しない方が無難です。
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"> |
ブラウザー 表示例 | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
なお,この例では,テーブルの周辺の境界線とその内側にあるセル境界までの間隔は, padding の値 3px を加えた値となり,内部のセル同士の 間隔より大きくなっています。
また,border-collaps プロパティの値を collaps に指定すると,table要素の border-spacing や padding の指定は無効になります。