セルとセルの間隔を指定；border-spacing

【border-spacing】の使い方

「セルの枠線」も外部CSSで指定することで、HTMLソースがすっきりし、SEO対策（内部対策）として検索エンジン最適化に有効です。

SEO初心者でも簡単に検索上位表示ができるように、サンプルをご紹介しますので、アクセスアップにお役立て下さい。

※実際の表示や見え方は、ブラウザや使用環境に依存します。
また、SEO対策に不要と思われる値やキーワードは、独断で掲載していませんので予めご了承下さい。

【border-spacing】の書式

border-spacing: 値; /*上下左右のセル間隔を指定*/

border-spacing: 値 値; /*左右、上下のセル間隔を指定*/

• セルの枠線表示方法を指定する場合は、数値で指定する。
  • 相対的単位；px　%　em　ex
  • 絶対的単位；pt　mm　cm　in　pc
• border-collapseの値がseparateの場合に有効。
• マイナス数値は指定できない。

【border-spacing】の使用例

「セレクタ名」と「値」は、お好みで指定して下さい。

セルとセルの間隔を「上下左右10px」に指定。

▼ 表示
 

 
▼ HTML

<table class="sample01">
<tr>
<td>fixed</td>
<td>テーブル１行目の内容を読込んでレイアウト設定。</td>
<td>auto</td>
<td>テーブル全体の内容を読込んでレイアウト設定。</td>
</tr>
</table>

 
▼ CSS

td {
    border: 1px solid #FF99FF;
    background-color: #FFCCFF;
}

.sample01 {
    width: 450px;
    margin: 10px auto;
    padding: 3px;
    text-align: left;
    border: 1px solid #FF99FF;
    border-collapse: separate;
    border-spasing: 10px;
}

セルとセルの間隔を「左右20px、上下5px」に指定。

▼ 表示
 

 
▼ HTML

<table class="sample02">
<tr>
<td>fixed</td>
<td>テーブル１行目の内容を読込んでレイアウト設定。</td>
<td>auto</td>
<td>テーブル全体の内容を読込んでレイアウト設定。</td>
</tr>
</table>

 　
▼ CSS

td {
    border: 1px solid #FF99FF;
    background-color: #FFCCFF;
}

.sample02 {
    width: 450px;
    margin: 10px auto;
    padding: 3px;
    text-align: left;
    border: 1px solid #FF99FF;
    border-collapse: separate;
    border-spasing: 20px 5px;
}