テーブルの隙間について

質問

WEBのデザインを、本を読みつつ学んでいるのですが
テーブルに関して疑問があるので、質問させていただきます。

【cssの中身】

/* ヘッダー */
.head {
background-color:#ccc;
width:100%;
height:70px;
margin-left:auto;
margin-right:auto;
}

.head h1 {
font-size:14px;
font-family:Verdana,Osaka,MS UI Gothic,;
color:#000;
margin-bottom:2px;
}

.head td{
vertical-align:middle;
}

.head1 {
width:40px;
text-align:right;
}

.head2 {
text-align:left;
padding-right: 4px;
}

.date{
font-size: 12px;
color: #666;
font-family : Verdana,Osaka,"MS UI Gothic",serif;
}

/* メニュー */
.menu1 div{
float: left;
}
.menu{
width: 100%;
background-color: #666;
font-size: 12px;
font-weight: bold;
border-top: solid 1px white;
}
.menu1 div{
width: 80px;
border-right: solid 1px white;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
}
.menu2{
text-align: right;
}
.menu2 div{
margin-right: 10px;
color: #fff;
}

.menu1 a{
color: #999;
text-decoration: none;
}

.menu1 a:hover{
color: #fff;
}

【ページの中身】
<a name="top">
<table class="head" cellspacing="0">
<tr>
<td class="head1">
<img src="icon.jpg" border="0" alt="*" width="35" height="36">
</td>
<td class="head2">
<h1>********</h1>
</td>
</tr>
</table>
</a>

<table class="menu" cellspacing="0">
<tr>
<td class="menu1">
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
<div><a href="link.html">Test</a></div>
</td>
<td class="menu2">
<div>Last update:00.00</div>
</td>
</table>

このような形で、ヘッダーとメニューを作っているのですが、メニューの線とヘッダーとの間に1pxほどの隙間（白い部分）が出来てしまいます。これをなくすことはできないのでしょうか？メニュー部分のテーブルに cellspacing="0"を入れると隙間が無くなると本に書いていたのですが、ほんの少しだけ隙間が残ってしまいます。

宜しくお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.2

hinananana · ベストアンサー

まずはANo.1さんも言っているとおりHTMLが間違っています。
HTMLについてもう少し勉強をしましょう。

で、質問にある
＞ほんの少しだけ隙間が残ってしまいます。
についてなんですけど
解決方法はtableタグにcellpadding="0"を付け加えると隙間がなくなります

<table class="menu" cellspacing="0" cellpadding="0">
こんな感じに
tableタグを使う時はcellspacing="0" cellpadding="0" border="0"を入れると良いかも。

ここからちょっとだけアドバイスなんですけど
サンプルソースのものを作るのにtableタグは使わないほうがいいです。
というか、tableタグを使う時は表を作る時に使うのがいいかと。

そして、menuのところの
<div><a href="link.html">Test</a></div>
ですが
ANo.1さんのところにもあるul,liタグを使うのが良いです。

<ul>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
<li><a href="#">test</a></li>
</ul>

これだけじゃ横並びにならないので
CSSで
ul{ list-style:none; }
↑点をなくす
li{ display:inline; }
↑横並びにする

と横並びになります
あとのmargin,paddingはご自分で指定してください。

お礼

回答ありがとうございます。
>>tableタグを使う時はcellspacing="0" cellpadding="0" border="0"を入れると良いかも。
ありがとうございます。試してみたら解決できました！

>>サンプルソースのものを作るのにtableタグは使わないほうがいいです。
というか、tableタグを使う時は表を作る時に使うのがいいかと。
下の方の返信にも書いたのですが、これはほぼ参考本のサンプル通りに記述していまして…本の記述が間違ってるとなると、本はあまり参考にすべきではないようですね…メニューなどの部分は表を使わない方がいいのですね。わざわざ別の例を出していただきありがとうございます。htmlでデザインするのは難しいものですね…。

回答No.1

ORUKA1951

まず、HTMLが間違っています。
<a name="top"></a>の間に<table>は決して入ってはなりません。
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->12.2 A要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )より
　a要素には、行内要素以外含めない!!!--もし参考書にそんなソースが書かれていたら、他を読むまでもなく捨ててください。
　そもそも、レイアウトのために表を用いるのは、最も否定されています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
・・・【中略】・・・
* ページレイアウトの目的で表を用いる。
・・・【中略】・・・
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　本当に大事な、デザインよりはるかに重要な部分が間違っています。

　そしてCSSの書き方もおかしい、CSS(カスケーディングスタイルシート)は、カスケーディングするスタイルシートなのに、カスケーディングを知らないとしか思えません。

★HTMLは、レイアウトのために書いてはなりません。【最も大事なこと】文書構造をマークアップするためのものです。
★きちんとそれが出来ていれば、スタイルシートでどのようにもレイアウトできます。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
スタイルシートの前に、デザインを一切考えないでHTMLを作成してください。その上でどのように表示した以下を質問されると良いでしょう。
具体的なHTMLの例)・・これさえ出来れば、びっくりするほど簡単なCSS(たぶん20行もあれば十分)であなたの希望のデザインは出来ます。
テーブルでデザインするのはよくないのですか - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q6993356.html )
も、読んで置いてください。
<body>
＿<div class="header"><!-- 文書のヘッダー -->
＿＿<h1>********</h1><!-- 見出し -->
<!-- ロゴアイコンは内容に関係ないのでHTMLには書かなくて良い -->
＿</div>
＿<div class="section"><!-- 本文(章) -->
＿＿<div class="nav"><!-- ナビゲーションリンク -->
＿＿＿<ul><!-- リンクのリスト -->
＿＿＿＿<li><a href="./index.html">トップ</a></li>
＿＿＿＿<li><a href="./test.html"></a>テスト</li>
＿＿＿＿<li><a href="./test.html"></a>テスト</li>
＿＿＿＿<li><a href="./test.html"></a>テスト</li>
＿＿＿</ul>
＿＿</div>
＿＿<h2>本文見出し</h2>
＿＿<p>文章</p>
＿＿<p>文章</p>
＿</div>
＿<div class="footer" ><!-- フッター -->
＿＿<dl id="document-version">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2005-06-10</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd>
＿＿</dl>
＿<div>
</body>

お礼

回答ありがとうございます。
ほぼ参考書通りに組んでいて、自分で打ったところはほぼないのです。
>><a name="top"></a>の間に<table>は決して入ってはなりません。
そうなのですね。これも参考書通りに記述したのですが…
結構値段もかけたので、ショックですね。他の本を参考にすべきなのでしょうか。

>>カスケーディングするスタイルシートなのに、カスケーディングを知らないとしか思えません。
私も本を買い、1から勉強を始めたばかりなので、知らないことがあるのは否定できませんし、当たり前だと思っております。そのために知りたいと思い質問させていただいたので…