htmlのtableレイアウトについて

質問

こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた
サイト作りをしています。準初心者です。
昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、
テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど
も多用されていたりと、悲惨な有様なので、必死に修復しているところです。
テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた
のですが、ある問題に突き当たりました。
divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、
ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。
<TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と
テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に
<TABLE style=" border:0px;padding:0px;margin:0px;　　ｗｉｄｔｈ:400px;>
と指定し直した結果、計らずしもこの隙間は無くなりました。
そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！

回答No.3

ORUKA1951

boxサイズは、ウェブ標準だとmargin,paddingの値を引いた物のサイズです。
┏━━━━━━━┓
┃┌─────┐┃
┃│← width→│┃
┃└─────┘┃
┗━━━━━━━┛
margin
　padding
しかし、互換モードだと
┏━━━━━━━┓
┃┌─────┐┃
┃← 　width　→┃
┃└─────┘┃
┗━━━━━━━┛
だったりします。
　その差が出たのでしょう。
　そのような差を回避するために、HTMLのDOCTYPEを標準モードで動作するようにしておかないと、このようなトラブルに頭を悩ますことになります。
　⇒DOCTYPE スイッチ - Google 検索( https://www.google.co.jp/search?q=DOCTYPE%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&hl=ja )

＞昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、
＞テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からない
＞スペーサーｇｉｆなども多用されていたりと、悲惨な有様なので、必死に
＞修復しているところです。
　御愁傷様としか言いようがない。まさに
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
　・メーカー独自拡張のHTMLを使う。
　・テキストを画像に置き換えて表現する。
　・余白制御のために画像を用いる。
　・ページレイアウトの目的で表を用いる。
　・HTMLでページを作らずにプログラムに頼る。
　こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

　を絵に描いたようなものだと推察します。

　この指摘が1999年のHTML4.01の勧告から15年も経過しての状況なのですから・・・

　WYSIWYG（What You See Is What You Get)のWebオーサリングツール( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB )を使用して「HTMLでページを作らずにプログラムに頼」って作成したときの致命的な欠陥ですね。

　私は、WYSIWYGで作成されたウェブサイトの修正が仕事の一部であり、最大の負担ですから、よくわかります。
　今後HTML5の時代に移行すると思いますが、そうなるとWYSIWYG的なツールでの作成は困難になるでしょう。だって、この部分はheaderだな、この部分はasideだな、いやfigureだ、なんて判断はツールには不可能ですし、「DIVは他に適当な要素がないときの最後の手段( http://www.w3.org/TR/html5/grouping-content.html#the-div-element )」と言われても・・

対策:最善な物から
1) 全面的にテキストエディタで書き換える。
　　私の経験からは結局一番早かったりする。SEO的にも最善ですし
　　『HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的である( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )』
2) DOCTYPEスイッチを標準モードで動作するように指定する。
　極力、strictに書き換える。
　「HTML文書を作る場合には、・・・【中略】・・・strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )」
　これって、期待はずれの動作を防止するには重要
3) すべてのHTMLの属性やタグにおけるプレゼンテーションを消してスタイルシートに置き換える。

回答No.2

shockatz

気にしなくても、CSSとテーブルが併用されたWebページはいっぱいありますよ。

さすがに昔のように、二重や三重に<table>が使われたサイトは影をひそめましたが、全体のレイアウトを<div>などのブロック構成し、記事にあたるメイン部分を<table>で組んだものが多いです。

理由は簡単で、全体の構成を壊さずに、必要部分だけをビルダーやDreamweaver、ContributeなどのWYSIWYGで組めるからです。
Webのことなどほとんどわからない一般の人が、外殻の構造を破壊しないで、センタリングや写真のフロート配置などを行いながら、そこそこ見栄えのいい、自分の会社やお店のHPを更新する手段としては唯一の方法ではないですか。

内部の<table>が外枠の<div>いっぱいに広がらなかったのは、<table>がインライン要素だからです。
<table>をブロック要素にしてあげれば、marginやpaddingが有効になります。

回答No.1

hitomura

すみません、問題解決に寄与しないであろう補足要求なのですが、
> テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど
> も多用されていたりと、悲惨な有様
という具合に問題点が理解できているのになぜ
> テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保
という判断をされたのでしょうか。

なにか抜本的対策を行えない切実な理由がございましたら補足願います。
その補足がないと、たぶんそのあたりに厳しい回答者様から即座に抜本的対策を取れというまっとうだがあなたの状況上受け入れられない回答が来ると思われます。
# 念のために書いておきますが、私も理由が軽微ならば即座に抜本的対策をとるべきという立場です。