Border Collapse
IEの<TABLE>では、CELLSPACING="0"の指定がない場合、セルとセルの間が空いて表示します。
しかし、<TABLE>タグにCELLSPACING="0"が指定してある場合は、空かずに表示します。
BORDER COLLAPSEプロパティーは、<TABLE>タグにCELLSPACING="0"をCSSで指定するためのプロパティーです。
このプロパティーは、IE4には対応していません。
{ border-collapse : collapse | separate }
枠線を重ねて表示
COLLAPSEを指定した場合、<TABLE>にCELLSPACINGが指定していない場合でも、セルとセルを重ねて表示します。
<TABLE>タグにCELLSPACING="0"を指定した場合、効果がありません。
{ border-collapse : collapse }
border-collapse: collapse;
<style type="text/css">
<!--
table { border-collapse: collapse;
border: 1px solid
rgb(255,128,0); }
table th { text-align: left;
bborder: 1px solid
rgb(51,77,204); }
table td { border: 1px solid rgb(153,153,153); }
-->
</style>
| property | value |
|---|---|
| font-family | family-name | generic-family |
| font-style | normal | italic |
| font-variant | normal | small-caps |
| font-weight | normal | bold |
枠線を空けて表示
SEPARATEを指定した場合、<TABLE>にCELLSPACINGが指定していない場合、セルとセルの間を空けて表示します。
サンプル2は、<TABLE>タグにCELLSPACING="0"を指定した場合です。
{ border-collapse : separate }
border-collapse: separate;
<style type="text/css">
<!--
table { border-collapse: separate;
border: 1px solid
rgb(255,128,0); }
table th { text-align: left;
border: 1px solid rgb(51,77,204);
}
table td { border: 1px solid rgb(153,153,153); }
-->
</style>
| property | value |
|---|---|
| font-family | family-name | generic-family |
| font-style | normal | itali |
| font-variant | normal | small-caps |
| font-weight | normal | bold |
Sample 2
<style type="text/css">
<!--
table { border-collapse: separate;
border: 1px solid
rgb(255,128,0);}
table th { text-align: left;
border: 1px solid rgb(51,77,204);
}
table td { border: 1px solid rgb(153,153,153); }
-->
</style>
<table cellspacing="0">
| property | value |
|---|---|
| font-family | family-name | generic-family |
| font-style | normal | italic |
| font-variant | normal | small-caps |
| font-weight | normal | bold |
枠線の間隔の設定
Internet Explorerでは、border-spacingプロパティーに対応できていません。
したがって、セルとセルの間隔を指定する場合、<TABL>タグのCELLSPACING属性で設定しなければなりません。この場合の単位は、ピクセルかパーセントになります。
サンプル2は、<TABLE>タグにCELLSPACING="8"を指定した場合です。
border-collapse: separate;
<style type="text/css">
<!--
table { border-collapse: separate;
border: 1px solid
rgb(255,128,0);}
table th { text-align: left;
border: 1px solid rgb(51,77,204);
}
table td { border: 1px solid rgb(153,153,153); }
-->
</style>
<table cellspacing="8">
| property | value |
|---|---|
| font-family | family-name | generic-family |
| font-style | normal | italic |
| font-variant | normal | small-caps |
| font-weight | normal | bold |
 |
 |
|---|
