- 締切済み
文字とテーブルの間に隙間ができてしまいます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> があると、 <table width="100%"> <tr> <td class="test"> <h1> aaa </h1> </td> </tr> </table> としたときに、cellpaddingをしていないのに、文字とテーブルの間に隙間ができてしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> をなくすと、通常通り表示されます。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">をつけつつ、Ｈ１タグで記載しつつ、 テーブルの間に隙間を作らない方法はありますか？
- NTHZNRTFJV
- お礼率94% (34/36)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ところで、まさかですが・・・tableを文書の整形に使用されていませんか？？ 15年前の1999年のHTML4.01の勧告以来、tableを文書の整形に使用することはとても強く否定されてきました。 私も当時からtableは整形には使用していません。 『 ⇒単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 『 ⇒ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 また、これはそれ以上に 『HTML 4.01仕様は、3つのDTDを規定しており、著者は自分の文書に、次の3つの何れかの文書型宣言を含めねばならない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.2 )』です。 もちろん、「 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」 です。 ★DOCTYPEスイッチ このDOCTYPE宣言は、ブラウザにどのバージョンで作成されたかを示すためで、それによってブラウザは表示が大きく変わります。 ⇒DOCTYPEスイッチ－HTMLの基本 ( http://www.htmq.com/htmlkihon/302.shtml ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> という宣言だと、MacIEを除いて他のブラウザは、ウェブ標準モードで描画します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> だとMacIEも含めて標準モードで動作します。 ★なぜ、標準モードなのか 互換モードは、IEが他のブラウザを追い落とすために独自仕様で描画を行っていた名残と言って良いでしょう。IEはOSに標準で付いてくるため、それでなければ見れないページを増やすことは、そのままOSのシェア確保の目的があったのでしょう。 しかし、それではHTMLの本来の目的からかけ離れたものになる・・・ということで、ウェブ標準が定められ、Microsoftも長く抵抗していましたが、IE8以降はIEも標準モードに移行しました。 すなわち、仕様どおり ・DOCTYPE宣言を書かれている。 ならば、すべてのブラウザでの表示は同じになる。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ということです。 ＞cellpaddingをしていないのに、文字とテーブルの間に隙間ができてしまいます。 ＞<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">をつけつつ、Ｈ１タグで記載しつつ、テーブルの間に隙間を作らない方法はありますか？ それは、単純にh1要素のマージンによるものでしょう。 ブラウザはデフォルトのスタイルシートで h1 { font-size: 2em; margin: .67em 0 } ⇒Default style sheet for HTML 4 - CSS 2.1 spec (ja) ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html ) になっています。 <h1 style="margin:0;"> でマージンは消えるはずです。 あわせて、<html><body>にもmargin:0;padding:0もね。 ★ただし、まずtableでデザインすることを止めるほうが先決です。 ⇒構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) それがHTML4.01以降のHTMLですし、次世代のHTM5ではもっと厳しくなります。 こちらをご覧になると、その意味が実感できるでしょう。 ⇒ナビゲーションリストを様々にデザインしてみよう。 ( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) もちろん、tableは一切使われていないことがソースを見ればわかります。 ・HTMLには文書構造（意味的な）しか書かれていないため、メンテナンスが楽です。 そのうえで、ブラウザの[表示]メニューから[スタイル(シート)]に進み、色々なスタイルシートを選択してみる。 HTMLを書き換えることなく、スタイルシートを変更するだけでデザインが変更できる。 ・印刷プレビューで印刷状態を確認してみる ・ウィンドウ幅を変えてみる。
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
cssで h1 { margin: 0; padding: 0 } でいけない？
