CSSテーブル - 隣接セルの間隔設定 | border-spacing

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

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

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

border-spacing属性


border-spacingは、隣接するセルのボーダー（枠線）の間隔を指定します。

■　border-spacing属性のブラウザーの対応状況
◇　Netscape6（＋）、 Firefox1（+）、 Opera6（+）、IE（X）

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

■　border-spacing属性の値
◇　数字＋単位：　隣のセルの間隔の大きさを指定します。border-collapse:separateを指定した場合のみ有効。
※単位にはpx,ex,ptなどの長さ単位を指定可能

例：
table { border-spacing : collapse; }

border-spacing属性の使用例


HTMLソース 別ウィンドウで確認


<html>
<head>
<style type="text/css">
<!--
table#spacing2  {
    border-collapse: separate;
    border-spacing: 20px 50px;
    border: solid 1px black;
}

table#spacing1  {
    border-collapse: separate;
    border-spacing: 30px;
    border: solid 1px black;
}

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

<body>

▼Netscape6（＋）、 Firefox1（+）、 Opera6（+）対応<br>
<br>


◇　border-spacing値を1つ指定場合：border-spacing: 30px
<table id="spacing1">
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
    <tr>
        <td class="bd">セル内容</td>
        <td class="bd">セル内容：あいうえおあいうえお</td>
    </tr>
</table>

<br><br>
◇　border-spacing値を2つ指定場合：border-spacing: 20px 50px
<table id="spacing2">
    <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