みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

テーブルに関する質問です。
wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為
試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが
やはり同じ現象が起き、思った通りのレイアウトにならないです。

一行目のテーブルと二行目のテーブルはくっつけて、
二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが
(1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって
間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、
(2)の白いborderをセルの右側だけに表示させるという方法では、
Firefoxでは思った通りのレイアウトなのですが、
IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。
色によっては誤魔化かされて付き出てない様に見えるのですが。

どうしたら良いでしょうか?
よろしくお願いします。

(1)
<HTML>
<HEAD>
<TITLE>テスト</TITLE>
<STYLE type="text/css">
<!--
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
-->
</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">
<!--
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none;
}
-->
</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>

投稿日時 - 2010-08-18 02:00:20

QNo.6117202

困ってます

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

テーブルレイアウトですか。
ようするに、横方向の空白はいらないが、
縦方向の空白は必要なんですよね?
であれば、一番単純な方法でお伝えします。

そのソフトはちょっと使ったことが無いですが、
HTMLを直接txtかなんかで作ってみればよいだけの事。





<html>
<head>
<title>無題ドキュメント</title>
<style type="text/css">
<!--
.test {
border-right-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-right-color: #FFF;
border-left-color: #FFF;
}
-->
</style>
</head>

<body>
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#CC3300">&nbsp;</td>
</tr>
<tr>
<td width="100" bgcolor="#FFCC00">&nbsp;</td>
<td width="98" bgcolor="#FFCC00" class="test">&nbsp;</td>
<td width="100" bgcolor="#FFCC00">&nbsp;</td>
</tr>
</table>
</body>
</html>



以上が正解だと思われます。
ようするに、真ん中のセルにのみ、左右のセルとの境界線に1pxの白いラインを引きます。

ただ、上のhtmlもそうですが希望通りに300pxのテーブルに縦ライン1pxを計2px入れると、
セルになるスペース298が3で割れませんよ。
これをたとえば、テーブルを302にして、td widhtをそれぞれ100にすると均等になります。

ちなみにIE、firefox、両方とも確認済。

あと一言アドバイスするなれば。
一つひとつのタグにCSSを入れると大変面倒なので、
私が出した答えのようにクラスとして入力すれば大変便利です。
class=で呼び出せば、それだけで何度も複数に使えますし。サイトが軽くなります。

もう一つ言えば、そのcssを外部呼出しにすればもっとコンパクト。

投稿日時 - 2010-08-18 02:28:57

お礼

こんばんわ。
とても判り易い説明とソースコードありがとうございます!
こんなに早く回答を頂けているとは思いませんでした。
borderのpx分、全体のセルのサイズも増やさなければならないのですね。

無事、HPにも適用する事が出来、IE6でもレイアウト崩れしなくなりました。
重ね重ね感謝です。

投稿日時 - 2010-08-18 20:57:51

ANo.1

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問