構文

border-spacing : 左右間隔 上下間隔;

説明文

　「border-spacing」はセル間の間隔を指定する。「border-collapse」で「separate」を指定すると，セルとセルが分離して，その間に空白ができる。このborder-spacingでは，このセルとセル間の間隔を指定できる。

　間隔を1つ指定すると，各セルの上下左右間隔が全て指定した間隔になる。また，スペースで区切って2つの間隔を指定すると，1つ目は左右の間隔を，2つ目は上下の間隔を指定できる。

　また，「border-collapse」にて「collapse」を指定した場合は，セルの間隔を指定しても無効となる。

使用例

● CSSの定義

table { border-spacing : 10px 4px;
        border-collapse : separate ; }
th, td { border : 2px solid #000080;
         padding : 3px; }

● HTMLの例

<h2>日経BP社の雑誌</h2>
<table>
	<tr>
		<th>雑誌名</th>
		<th>販売形態</th>
		<th>年間購読料</th>
	</tr>
	<tr>
		<td>日経パソコン</td>
		<td>直販</td>
		<td>1万3800円</td>
	</tr>
	<tr>
		<td>日経ビジネス</td>
		<td>直販</td>
		<td>2万3000円</td>
	</tr>
	<tr>
		<td>日経Linux</td>
		<td>店頭販売</td>
		<td>1万7880円</td>
	</tr>
	<tr>
		<td>日経トレンディ</td>
		<td>店頭販売</td>
		<td>6480円</td>
	</tr>
</table>

● 表示結果

Internet Explorerの表示例
[画像のクリックで拡大表示]
Firefoxの表示例
[画像のクリックで拡大表示]

関連項目