テーブル内に隙間が。

解決済

質問者：moyashi_room
質問日時：2010/04/03 04:08
回答数：3件

テーブル内に隙間が。
質問です。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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「CSS 高さ」に関するQ&A：【CSS】ヘッダーの高さが不明の時、コンテンツの高さの指定について

さらに表示

「画像クラス」に関するQ&A：片想い相手がクラスの女子の画像を保存していた・・

「ディスプレイ高さ」に関するQ&A： 20インチで高さ調節や角度調節が楽にできる液晶ディスプレイ

「Web クラス」に関するQ&A： WEBアプリでのデータクラスの定義について

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： ORUKA1951
回答日時：2010/04/03 12:17

＞何を思ったか「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>

- 0
- 件

通報する

この回答へのお礼

自分のような阿呆にアドバイスを…ありがとうございます。

その後解決いたしました。
原因は，恐らく，テーブルを指定する際，ブロック要素
として扱うために右側のメニューのブロックが邪魔をして
左側のブロックと，ずれが生じてしまったようです。

解決方法としてtableタグは使用せず全てCSSのブロック要素で配置
しました。左側のメニューブロックは上記の回答にあるように
リストを用いる事てCSS解除時（携帯電話のブラウザや音声〃）
でも奇麗に表示されました。
（このようにしたかったから最初はtableタグを使った訳です）

…
そもそも要素の配置の仕方，階層構造，レイヤーの概念が
あやふやだったことが今回の大きな原因でした。
ご回答してくださった皆さん，
ありがとうございました。

通報する

お礼日時：2010/04/06 01:10

No.2

回答者： ORUKA1951
回答日時：2010/04/03 10:14

せっかくCSSを使うのに、なぜtableでデザインされるですか？

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

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます！

>Q:画像の実寸は？？(W :　　　px)(h :　　　px)
画像についてですが、これは説明しやすくする為に用いた
だけで実際には、サイズ可変のobject(swf)が配置されます。
説明不足でした。すみません。

>せっかくCSSを使うのに、なぜtableでデザインされるですか？
確かに自分でも何がしたいのやら。最初はCSSに頼って
コテコテのデザインにしようかと思ったのですが、音声ブラウザで
読み上げたら、まぁ、酷いことになりました。
そこで、何を思ったか「tableならそれを解消できるのでは」と
理由もなく閃きました。何でそんな事を考えたのか…。

一からCSSでデザインし直してみます。

通報する

お礼日時：2010/04/03 11:02

No.1

回答者： pasocom
回答日時：2010/04/03 06:54

</style>

<table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300">

上の「cellspacing="2"」→「cellspacing="0"」に。