border-collapse:枠線の表示形式

---

枠線の表示形式：

collapse	枠線を重ねて表示
separate	枠線を重ねないで表示

border-collapseプロパティで、テーブルの外枠や各セルの枠を重ねて表示するか、しないかを指定します。
このプロパティはTABLE要素に対してのみ指定できます。

セルの枠を重ねて表示する場合に、太さや形式の異なるものが重なったときの優先順位は以下のようになります。

1.	border-styleプロパティの値が「hidden」のものは最優先される
2.	border-styleプロパティの値が「none」のものは最も優先度が低い
3.	「hidden」と「none」以外が指定されている場合、より太い枠線が優先される。 太さが同じで形式が異なる場合の優先順位は以下の順となる。 double ← solid ← dashed ← dotted ← ridge ← outset ← groove ← inset
4.	枠線の太さも形式も同じ場合の優先順位は以下の順となる。 th要素・td要素 ← tr要素 ← thead・tbody・tfoot要素 ← col要素 ← colgroup要素 ← table要素

枠線を重ねて表示

商品	第1週	第2週
コーヒー	132,000	129,000
紅茶	114,900	50,600

---

枠線を重ねないで表示

商品	第1週	第2週
コーヒー	132,000	129,000
紅茶	114,900	50,600

<STYLE type="text/css">
<!--
CAPTION { font-size:10pt; }
TH { font-size:9pt; }
TABLE#case1 {
border-collapse : collapse ;
border-color : #666666 ;
border-width : 1px ;
border-style : solid ;
}
TABLE#case2 {
border-collapse : separate ;
border-color : #0000ff ;
border-width : 1px ;
border-style : solid ;
}
-->
</STYLE>

<TABLE id="case1" cellpadding="0" bgcolor="#ffcccc" border="3">
<CAPTION>枠線を重ねて表示</CAPTION>
<TR>
<TH width="100">商品</TH>
<TH width="100">第1週</TH>
<TH width="100">第2週</TH>
</TR>
<TR>
<TD width="100" align="center">コーヒー</TD>
<TD width="100" align="center">132,000</TD>
<TD width="100" align="center">129,000</TD>
</TR>
<TR>
<TD width="100" align="center">紅茶</TD>
<TD width="100" align="center">114,900</TD>
<TD width="100" align="center">50,600</TD>
</TR>
</TABLE>

<BR><HR><BR>

<TABLE id="case2" cellpadding="0" bgcolor="#e5e4f9" border="3">
<CAPTION>枠線を重ねないで表示</CAPTION>
<TR>
<TH width="100">商品</TH>
<TH width="100">第1週</TH>
<TH width="100">第2週</TH>
</TR>
<TR>
<TD width="100" align="center">コーヒー</TD>
<TD width="100" align="center">132,000</TD>
<TD width="100" align="center">129,000</TD>
</TR>
<TR>
<TD width="100" align="center">紅茶</TD>
<TD width="100" align="center">114,900</TD>
<TD width="100" align="center">50,600</TD>
</TR>
</TABLE>