テーブルタグ｜セル間の幅(隙間)

テーブルの構造

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

サンプル

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

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

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

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

セル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="0"としてスペースを無くしましたが、逆にcellspacing="数値"を変えてやる事で利用する機会もあります。

• 目次
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8