テーブル内に隙間が出来る問題の解決方法

2010/04/03 04:08

このQ&Aのポイント

CSSとテーブルタグを使用してwebページを作成したが、IE,FireFox,Chromeなどのブラウザでは隙間が発生してしまう。この問題を解決するために、どの部分を修正すればいいのかについて教えてください。
テーブル内に隙間が出来る問題を解決するため、HTML/CSSのコードを見直す必要があります。画像やセルの幅・高さの設定に留意することで、ブラウザごとの表示差を最小限に抑えることができます。
テーブル内に隙間が生じてしまう原因は、td要素のマージンやパディングの設定にあります。それぞれのブラウザにおけるデフォルトのマージン・パディング値が異なるため、適切な値を設定する必要があります。

テーブル内に隙間が。

テーブル内に隙間が。質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。これを無くすにはどうすればいいのでしょうか。（html/cssの書き直さなくてはならない箇所はどこでしょうか）高さは左右のセルとも300に合わせているのですが…。どなたかご教授願います。  <style TYPE="text/css">  </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> no content </td></tr> </table>

moyashi_room
お礼率83% (5/6)

ホームページ作成ソフト
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/04/03 12:17 回答No.3

＞何を思ったか「tableならそれを解消できるのでは」と＞理由もなく閃きました。何でそんな事を考えたのか…。サイズなどから携帯電話やPDA、さらには読み上げブラウザも想定されているなら、HTMLは下記の様なものになるでしょう。　CSSのデザインは、簡単ですから・・先のサイズを紹介してください。 <body> <div> <h1>あいうえお</h1> <p><object data="[URL]" type="application/x-shockwave-flash" width="[横サイズ]" height="[縦サイズ]"> <param name="bgcolor" value="[ColorName|ColorCode]"> <param name="loop" value="on|off"> <param name="quality" value="high|medium|low"> <object data="[mpegURL]" type="application/mpeg"> <object data="[GIF-URL]" type="image/gif"> なんとかの写真 </object> </oblect> </object> </p> <ul class="nav"> <li><a href="../about/index.html">cell_1</a></li> <li><a href="../flash/index.html">cell_2</a></li> <li><a href="../web/index.html">cell3</a></li> <li><a href="../diy/index.html">cell_4</a></li> <li><a href="../link/index.html">cell_5</a></li> </ul> </div> </body> </html>

質問者

お礼 2010/04/06 01:10

自分のような阿呆にアドバイスを…ありがとうございます。その後解決いたしました。原因は，恐らく，テーブルを指定する際，ブロック要素として扱うために右側のメニューのブロックが邪魔をして左側のブロックと，ずれが生じてしまったようです。解決方法としてtableタグは使用せず全てCSSのブロック要素で配置しました。左側のメニューブロックは上記の回答にあるようにリストを用いる事てCSS解除時（携帯電話のブラウザや音声〃）でも奇麗に表示されました。（このようにしたかったから最初はtableタグを使った訳です） … そもそも要素の配置の仕方，階層構造，レイヤーの概念があやふやだったことが今回の大きな原因でした。ご回答してくださった皆さん，ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

ORUKA1951
ベストアンサー率45% (5062/11036)

2010/04/03 10:14 回答No.2

せっかくCSSを使うのに、なぜtableでデザインされるですか？ところで、高さを300px;幅を92%でデザインされていますが、ウィンドウ幅はどの程度を想定されているのでしょうか？幅が、1028pxのディスプレイだと、946px幅となって高さが300pxで添付画像のようにはなりません。 Q:画像の実寸は？？(W :　　　px)(h :　　　px) Q:表示幅は　最小何ピクセル(　　　px) 　普段画面の(　　　%) 　最大(　　　　px) Q:メニューは左の高さを5等分したものでよいのか？

質問者

お礼 2010/04/03 11:02

回答ありがとうございます！ >Q:画像の実寸は？？(W :　　　px)(h :　　　px) 画像についてですが、これは説明しやすくする為に用いただけで実際には、サイズ可変のobject(swf)が配置されます。説明不足でした。すみません。 >せっかくCSSを使うのに、なぜtableでデザインされるですか？確かに自分でも何がしたいのやら。最初はCSSに頼ってコテコテのデザインにしようかと思ったのですが、音声ブラウザで読み上げたら、まぁ、酷いことになりました。そこで、何を思ったか「tableならそれを解消できるのでは」と理由もなく閃きました。何でそんな事を考えたのか…。一からCSSでデザインし直してみます。

ログインすると、全ての回答が全文表示されます。

pasocom
ベストアンサー率41% (3584/8637)

2010/04/03 06:54 回答No.1

</style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> 上の「cellspacing="2"」→「cellspacing="0"」に。

質問者