border-spacingプロパティ

プロパティ border-spacing は、 HTML テーブルの td セルまたは th セル間（およびセルの境界線とテーブル自体の間）の間隔を設定します。プロパティの値には、パーセントを除く任意のサイズ単位を使用できます。

構文

セレクタ {
	border-spacing: 1つまたは2つの値;
}

値

値	説明
1つの値	1つの値は、垂直方向と水平方向のセル間隔を同じ値で設定します。
2つの値	最初の値は水平方向の間隔を、2番目の値は垂直方向の間隔を設定します。

デフォルト値: 0。しかし、各ブラウザは属性 cellspacing に独自のゼロ以外の値を持っているため、デフォルトではセル間に間隔が表示されます。

備考

このプロパティはテーブルのセルに対してではなく、テーブル自体に適用してください（セルには効きません）。

同様の効果を margin で実現することはできません。なぜなら、テーブルセルに対する margin は機能しないからです。

border-collapse プロパティが collapse に設定されている場合、 border-spacing は機能しません。

例 . 1つの値

セル間（およびセルとテーブル境界線の間）の間隔を 10px にしてみましょう:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

例 . 2つの値

今度は、水平方向の間隔を 10px、垂直方向の間隔を 30px にしましょう:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

例 . border-collapse: collapse を設定

今度は、border-collapse プロパティが collapse に設定されているため、 border-spacing は機能しません:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}