現在地: Home » 初級ホームページ作成講座：目次 » セル間の幅(隙間)

セル間の幅(隙間)

テーブルの構造

セルを横に並べるのところで最後掲載した部分ですが、まず下記を見て下さい。解りやすくテーブルとセルを枠表示してみました。

黒（table領域）
赤（td領域）
黒（table領域）
赤（td領域）

 

黒の実線部分がテーブル、赤の点線部分がセルの領域です。見ての通り両者の間に僅かながら空間（スペース）が空いてます。セルを横に並べるのところで最後掲載した部分の両者の長さの違いはこの為に起きています。このスペースを取ってやる事でこの問題は解決します。

またこのスペースを有効利用してホームページを作る事もあります。

▲Top

テーブルとセルの隙間をなくす

<table border="0" cellspacing="0">

セルA
セルB
セルA
セルB

 

tableタグ

cellspacingを適用
<table border="0" cellspacing="0" style="border: 1px solid black;">
<tr>
<td height="50" style="border: 1px dotted red;">セルA</td>
</tr>
<tr>
<td height="50" style="border: 1px dotted red;">セルB</td>
</tr>     
</table>

cellspacingを適用前
<table border="0" style="border: 1px solid black;">
<tr>
<td height="50" style="border: 1px dotted red;">セルA</td>
</tr>
<tr>
<td height="50" style="border: 1px dotted red;">セルB</td>
</tr>     
</table>

cellspacing="0"としてスペースを無くしましたが、逆にcellspacing="数値"を変えてやる事で利用する機会もあります。

▲Top

高性能サーバ

低価格サーバ

無料ホームページスペース