border-spacing:間隔
border-spacing:間隔1 間隔2
間隔:
間隔1:
間隔2:
border-spacingプロパティで、各セルの枠線と枠線の間隔を指定します。
値が1つのときは上下左右が同じ間隔となり、値が2つのときは左右・上下別々の値を指定することができます。
値を2つ指定するときは、半角スペースで区切ります。
しかし、InternetExplorerでは上手く表示されないようです。
上下左右の間隔が10px
| 業者名 |
発注個数 |
納入個数 |
| 丸丸商事 |
200 |
150 |
| 三角物産 |
150 |
60 |
左右の間隔が5px 上下の間隔が20px
| 業者名 |
発注個数 |
納入個数 |
| 丸丸商事 |
200 |
150 |
| 三角物産 |
150 |
60 |
<STYLE type="text/css">
<!--
CAPTION { font-size:10pt; }
TH { font-size:9pt; }
TABLE#case1 {
border-spacing : 10px ;
border-color : #666666 ;
border-width : 1px ;
border-style : solid ;
}
TABLE#case2 {
border-spacing : 5px 20px ;
border-color : #00cc00 ;
border-width : 1px ;
border-style : solid ;
}
-->
</STYLE>
<TABLE id="case1" cellpadding="0" bgcolor="#edfbed" border="3"
>
<CAPTION>上下左右の間隔が10px</CAPTION>
<TBODY>
<TR>
<TH width="100">業者名</TH>
<TH width="100">発注個数</TH>
<TH width="100">納入個数</TH>
</TR>
<TR>
<TD width="100" align="center">丸丸商事</TD>
<TD width="100" align="center">200</TD>
<TD width="100" align="center">150</TD>
</TR>
<TR>
<TD width="100" align="center">三角物産</TD>
<TD width="100" align="center">150</TD>
<TD width="100" align="center">60</TD>
</TR>
</TBODY>
</TABLE>
<BR><HR><BR>
<TABLE id="case2" cellpadding="0" bgcolor="#e5e4f9" border="3"
>
<CAPTION>左右の間隔が5px 上下の間隔が20px</CAPTION>
<TBODY>
<TR>
<TH width="100">業者名</TH>
<TH width="100">発注個数</TH>
<TH width="100">納入個数</TH>
</TR>
<TR>
<TD width="100" align="center">丸丸商事</TD>
<TD width="100" align="center">200</TD>
<TD width="100" align="center">150</TD>
</TR>
<TR>
<TD width="100" align="center">三角物産</TD>
<TD width="100" align="center">150</TD>
<TD width="100" align="center">60</TD>
</TR>
</TBODY>
</TABLE>