セルのマージンを指定しよう

【生涯学習のユーキャン】教養と資格を身に付けてみませんか?
無料資料請求はこちら

ホームページは難しくない  ちょこっとHTML  Lesson7

<table padding="○"> 〜 </table>

セルのマージンを指定してみましょう
マージン というのは セルの枠線と セル内に入る内容との間隔をいいます。
セルの余白 という言い方のほうが 解りやすいかもしれませんね。

まずは「セルの間隔」と「セルのマージン」の違いを理解しておいてください。

セルの間隔 セルのマージン
セル セル
セル セル
セル セル
セル セル

どちらも テーブルの幅は 120ピクセル
でも 見栄えは全然違いますね。

HTMLソースは こんな感じです。

<table width="120" border="1" cellpadding="10">
<tr>
<td width="60">セル</td>
<td width="60">セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
</tr>
</table>

 

これを踏まえて ちょっと下の写真を見てください。
この写真は 縦2行 横2列のテーブルで分割して表示しています。
ボーダー(border) セルの間隔(cellspacing) セルのマージン(cellpadding)
それぞれの違いを確認してみてください。

ボーダーは 0
セルの間隔は 0
セルのマージンは 0

ボーダーは 1
セルの間隔は 0
セルのマージンは 0
ボーダーは 0
セルの間隔は 1
セルのマージンは 0
ボーダーは 0
セルの間隔は 0
セルのマージンは 1

ボーダーやセルの間隔の場合は テーブルの枠の太さについて1ピクセルですが、
マージンの場合は枠から1ピクセルずつ余白が開きますので 、
ボーダーやセルの間隔にくらべて 余分に隙間ができちゃうわけです。

● テーブルのサイズについて

border cellspacing cellpadding の属性の指定は
テーブルの幅にも影響してきます。 width や height で
指定するときは この属性の値も考えておく必要がでてきます。




例えば 下のテーブルは td width="100" で
border="5" cellpadding="5" cellspacing="10" です。

セル1 セル2
セル3 セル4

td width="100" ボーダーは 5 間隔は 10 マージンは 5ですので、
5+10+1+5+100+5+1+10+1+5+100+5+1+10+5

合わせて264ピクセルということになります。
(1はセルの内側の影の部分です)

 

当ホームページは リンクフリーです! 
Copyright (C) 2005. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。