掲示板/HTML質問板/過去ログ/一覧/ テーブル内の余白について

0 名前： ＭＭＨＯＯＮＧ ： 2006/12/15（金） 07:25 ID:VrvcLCaj: 以下のようにテーブルを使ってサイドメニューを作成しているのですが、<td width="15"><img src="common/table/ico.gif" width="15" height="15"></td>と<td><a href="***.html">***</a></td>の間のスペースがIEで表示させると広くなってしまいます。

FireFoxとNetscapeでは、<td width="15"><img src="common/table/ico.gif" width="15" height="15"></td>と<td><a href="***.html">***</a></td>の間のスペースがないので、見栄えが変わってしまいます。

<td align="left>やスタイルシートを使って<td><a href="***.html">***</a></td>の文字を左に寄せようと思ってもやはりそれ以上寄りません（ＩＥのみ）。
ブラウザの仕様の問題だと思うのですが、この３つのブラウザで見栄え（td間のスペース）を統一する方法はないでしょうか？

宜しくお願いします。

<table class="fonts" bgcolor="#ffffff" width="200" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3"><h2><img src="common/table/title.gif" alt=""></h2></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="15"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td width="15"><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.html">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="7"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.htm">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="7"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.htm">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="7"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.htm">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="7"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.htm">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="7"></td>
</tr>
<tr>
<td><img src="common/table/spacer.gif" width="5" height="15"></td>
<td><img src="common/table/ico.gif" width="15" height="15"></td>
<td><a href="***.htm">***</a></td>
</tr>
<tr>
<td colspan="3"><img src="common/table/spacer.gif" height="5"></td>
</tr>
</table>

1 名前：サイ： 2006/12/15（金） 07:25 ID:qEhaFrSe

私の環境では、上のソースを貼り付けたところ、IEでもぴったりくっついてましたので検証できませんでした。

どうしても、拘りがあるのでなければ、リストタグを使用するのをお勧めします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>

<style type="text/css">
ul {list-style-image: url(common/table/ico.gif); }
li {margin:7px 0 0;}
</style>

</head>
<body>

<h2><img src="common/table/title.gif" alt=""></h2>
<ul>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
<li><a href="***.html">***</a></li>
</ul>

</body>
</html>

わざわざ行で隙間をあけることなくできます。

見栄えに関しては、下記でいろいろ説明があります。
http://www.tagindex.com/stylesheet/list/index.html

2 名前： MMHOONG ： 2006/12/15（金） 07:25 ID:VrvcLCaj: ブラウザだけの問題ではないのですね。
リストタグは全く思いつきませんでした。
後でやってみようと思います。
ご回答ありがとうございました。