CSSテーブル - セルのボーダーの表示方法設定 | border-collapse

2008/05/31 22:25Update
TAGS: CSSテーブル | セル | ボーダー | border-collapse

border-collapseはCSSテーブル（表）の表示のスタイルに関連する属性で、セルのボーダー（枠線）の表示方法を指定します。 本文はborder-collapseについて学びたいと思います。

CSSテーブル関連属性：
◇　empty-cells
◇　border-collapse
◇　table-layout
◇　border-spacing
◇　caption-side

border-collapse属性


border-collapseは、セルのボーダー（枠線）の表示方法を指定します。

■　border-collapse属性のブラウザーの対応状況
◇　IE5（+） Netscape7 Firefox1（+） Opera6（+）

■　border-collapse属性の適用対象要素
◇　table

■　border-collapse属性の値
◇　collapse：　隣のセルの枠線を重ねて表示します。table要素のcellspacingプロパティに"0"と設定される時の効果と同じです。
◇　separate：　デフォルト値。隣のセルの枠線を間隔をあけて表示します。

例：
table { border-collapse : collapse; }

border-collapse属性の使用例


HTMLソース

<html>
<head>
<style type="text/css">
<!--
table#collapse  {
    border-collapse: collapse;
    border: 1px gray solid;
}

table#separate  {
    border-collapse: separate;
    border: 1px gray solid;
}

td.bd {border: solid 1px #ff3333;}
-->
</style>
<title>border-collapse使用例</title>
</head>

<body>

▼IE5（+） Netscape7 Firefox1（+） Opera6（+）対応<br>
<br>

◇　border-collapse: collapse;の場合
<table id="collapse" border="1px">
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
</table>

<br><br>
◇　border-collapse: separate;の場合
<table id="separate">
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
</table>

</body>

</html>

別ウィンドウで確認

有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Sponsored Link


Comments

  • Relative Articles