うまくいきません

質問

全体のテーブルはwidth=80%です。
(1)一番上にタイトルのテーブル
(2)その下に横長のテーブル
(3)左２０％に縦長のテーブル
(4)右８０％にメインテーブル

このように配置してるのですが、(1)と(2)の間がどうしても大きくあいてしまいます。ここの間を少し近づけたいのですが、heightやcellspacingやmarginやtext-indentを試しましたが、まったく動きません。なぜか(2)と(3)(4)との間は大きくあいてしまってないのですが、それで(1)をテーブルにしないで、

position:relative;
top:★px;

で指定すればできるのですが、他の方のパソコンで見たときの位置が大きくずれてしまうのが怖いのですが、いい方法はないでしょうか？

回答No.3

Kuppycat · ベストアンサー

これ、ソースまんまコピー&ペーストですよね？
だとすると、漢字空白２文字が意地悪してます。
<table border bordercolor="gray" align="center" width="100%" cellspacing="" cellpadding="3">
<tr>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
</tr>　　＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜この部分
</table>

確認してみてください。

お礼

で、できました～＾＾
そんな盲点があったとは・・・・・（驚）
アドバイスありがとうございます！！！

ちなみに、ソースみて、無駄な部分とか、ここはこう見直したほうがいいって部分あります？
まだhtml始めて一ヶ月も経ってない身分ですので、アドバイスいただけるとうれしいです。

回答No.5

Kuppycat

#3です。
HTMLを作るときはホームページビルダーなぞのソフトを使ったりしますよ。ExcelやWordでもできますね。
テーブルを扱うのならソフト使うほうが楽ですね。

色などの指定はやっぱりCSSで別にしておいたほうがいいです。
メンテナンス楽ですから。
色を変えたいって時に、いちいちタグの色指定を置き換えていくのは大変ですよ～（笑）

お礼

アドバイスありがとうございます＾＾
ホームページビルダーは聞いたことがあります。
今度使ってみます。

まだＣＳＳは使いこなせていないので、少しずつできるようにします。

回答No.4

sukeken

こんにちは、#2再びです。

私の場合、ちょっと違いましたが…(笑。

でもこれって手打ちですか？すごいですね。
テーブルって難しいです。気づくと余計な物が入っていますし。

htmlはできる限りシンプルがいいですね。後で何やっているか分からなくなるから(笑。
私ヤフオクの画面、こんな感じのテーブル尽くしになっています。結構見やすくて良いと思うんですけど、中身を変えるときはむちゃくちゃ大変です(笑。

でわ！

お礼

でもこれって手打ちですか？

ってことは、他にホームページ作る際、方法があるってことですか？

確かにテーブルは・・・大変ですよね（汗）
作ってる最中も、あれ？これってどうなってるんだっけ？みたいな感じの中でやってます。
早く慣れたいです。

ヤフオク自分もやってます。
出品側がほとんどですけどね。おかげで自分の周りの物がなくなっていきます（苦笑）

回答No.2

sukeken

こんにちは。

<tr>　←　★★削除
<td colspan="2">

<table border bordercolor="gray" align="center" width="100%" cellspacing="" cellpadding="3">
<tr>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
</tr>　　←　★★削除
</table>

で出来ると思いますけど、これでも良いのかな？
でわ！

お礼

そうすると、タイトルとその下のテーブルが横並びになってしまいます。
どうすればいいのか、わからんです（泣）

補足

回答No3さんのご意見で気づいたのですが、sukekenさんもこのことを言っていたんですね。
気づかず、勘違いしてしまいすいませんでした！！

回答No.1

moon_night

<table width="80%">
<tr><th>タイトル</th></tr>
<tr><td>横長</td></tr>
<tr><td width="20%">menu</td><td width="80%">main</td></tr>
</table>

コレでだめですか？
ダメな場合、ソースを掲示してみてください。

補足

<style type="text/css"><!--
p{font-weight:bold;}
td.font{font-weight:bold;}
th.font2{color:red;
font-size:23pt;
font-family:HGP明朝B;}
--></style>

<table align="center" width="80%" cellspacing="0" cellpadding="3">
<tr>
<td colspan="2">

<table border align="center" width="100%" cellspacing="" cellpadding="">
<tr><th class="font2">タイトル</th></tr>
</table>

</td>
</tr>

<tr>
<td colspan="2">

<table border bordercolor="gray" align="center" width="100%" cellspacing="" cellpadding="3">
<tr>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
<td align="center" class="font" width="20%"><a href="★">☆</a></td>
</tr>　　
</table>

</td>
</tr>

<tr>

<td valign="top" width="20%">
<table border bordercolor="silver" rules="none" align="center" width="100%" cellspacing="0" cellpadding="3">
<tr><td bgcolor="silver" class="font">BBS</td></tr>
<tr><td><a href="★">☆</a></td></tr>
<tr><td><a href="★">☆</a></td></tr>
<tr><td><a href="★">☆</a></td></tr>
</tr>
</table>

<table align="center" width="100%" cellspacing="5">
<tr><td></td></tr>
</table>

<table border bordercolor="silver" rules="none" align="center" width="100%" cellspacing="0" cellpadding="3">
<tr><td bgcolor="silver" class="font">★</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
</table>

<table align="center" width="100%" cellspacing="5">
<tr><td></td></tr>
</table>

<table border bordercolor="silver" rules="none" align="center" width="100%" cellspacing="0" cellpadding="3">
<tr><td bgcolor="silver" class="font">★</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
</table>

<table align="center" width="100%" cellspacing="5">
<tr><td></td></tr>
</table>

<table border bordercolor="silver" rules="none" align="center" width="100%" cellspacing="0" cellpadding="5">
<tr><td bgcolor="silver" class="font">★</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
<tr><td>☆</td></tr>
</table>
</td>

<td width="80%">
<table border bordercolor="silver" align="center" width="100%" cellspacing="0" cellpadding="5">
<tr><td align="center" bgcolor="silver" class="font">★</td></tr>
<tr><td><p>☆☆☆</p>★★★★★</td></tr>
<tr><td><p>☆☆☆</p>★★★★★</td></tr>
<tr><td><p>☆☆☆</p>★★★★★</td></tr>
<tr><td><p>☆☆☆</p>★★★★★</td></tr>
<tr><td><p>☆☆☆</p>★★★★★</td></tr>
</table>
</td>

</tr>
</table>

こんな感じです。