テーブルのレイアウトに関する問題

2010/08/18 02:00

このQ&Aのポイント

wordpressで作成したHPのテーブルが思った通りの形にならないため、htmlドキュメントで同じテーブルを作り直したが同じ現象が起きた。
テーブルのセルとセルの間隔を1pxにする方法がうまくいかず、2pxの間隔になってしまう。
一部のブラウザ（Firefox）では思った通りのレイアウトになるが、IE6では一行目のセルに線が付き抜けて表示されてしまう。

テーブルに関する質問です。

テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですがやはり同じ現象が起き、思った通りのレイアウトにならないです。一行目のテーブルと二行目のテーブルはくっつけて、二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。色によっては誤魔化かされて付き出てない様に見えるのですが。どうしたら良いでしょうか？よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>

laz2370
お礼率100% (1/1)

CSS
回答数1
ありがとう数6

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

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

ベストアンサー

einn
ベストアンサー率37% (671/1802)

2010/08/18 02:28 回答No.1

テーブルレイアウトですか。ようするに、横方向の空白はいらないが、縦方向の空白は必要なんですよね？であれば、一番単純な方法でお伝えします。そのソフトはちょっと使ったことが無いですが、 HTMLを直接txtかなんかで作ってみればよいだけの事。 <html> <head> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <table width="300" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3" bgcolor="#CC3300"> </td> </tr> <tr> <td width="100" bgcolor="#FFCC00"> </td> <td width="98" bgcolor="#FFCC00" class="test"> </td> <td width="100" bgcolor="#FFCC00"> </td> </tr> </table> </body> </html> 以上が正解だと思われます。ようするに、真ん中のセルにのみ、左右のセルとの境界線に1pxの白いラインを引きます。ただ、上のhtmlもそうですが希望通りに300pxのテーブルに縦ライン1pxを計2px入れると、セルになるスペース298が3で割れませんよ。これをたとえば、テーブルを302にして、td widhtをそれぞれ100にすると均等になります。ちなみにIE、firefox、両方とも確認済。あと一言アドバイスするなれば。一つひとつのタグにCSSを入れると大変面倒なので、私が出した答えのようにクラスとして入力すれば大変便利です。 class=で呼び出せば、それだけで何度も複数に使えますし。サイトが軽くなります。もう一つ言えば、そのcssを外部呼出しにすればもっとコンパクト。

質問者