自サイトを開設してそろそろ３周年になりますが、トップページにいろいろなバナーを貼りまくった結果、何だかゴチャゴチャして見にくくなってきたので、リニューアルを決意しました。
所属する団体のサイトも管理しているヘナチョコウェブマスターとしては、レイアウトはtableタグによらず、何としてもスタイルシート（CSS）を用いたいところですが、これがブラウザによって全然表示が違いまして、tableタグに逃げ込んでしまおうかと考えることたびたび・・・(笑)。
簡単なタグを使用しセンタリングするだけで文字がすっきり収まるtabelレイアウトは決して悪いものではないと思います。事実、これを多用している大手のウェブサイトが幾らでもございますね。
ただ、アクセシビリティやバリアフリー（ネット上の）の観点からもCSSによるレイアウトが推奨されて来ていますから、これは何としても成し遂げたいところでもあるのです。
一番の問題点は、CSSによるセンタリングがInternet Explorer７のみ機能しないことでした。margin:5px auto;で指定すれば、上下のマージンが５ｐｘ、左右は自動的に按分してセンタリングされるはずなのですが、ＩＥ７のみ左寄せ状態になります。ウェブ検索してみたところ、左右の割付をfloatでやっている場合、ＩＥではmargin:autoが機能しないという解説があり、そうだったのかと思いました。
しかしながら、ヘナチョコウェブマスター（＝私）が管理する団体サイトも同様のはずなのに、IEでもセンタリングされています。この団体サイトについて以前にもご教示頂いている志田の日記で愚痴をこぼしていたところ、あちこちのタグやCSSを削除して検証してみるといいというアドバイスを頂き、やってみたところ、ビンゴ！でした。
HTMLの文法としては、最低＜ｈｔｍｌ＞＜ｈｅａｄ＞＜／ｈｅａｄ＞＜ｂｏｄｙ＞＜／ｂｏｄｙ＞＜／ｈｔｍｌ＞があればいいということになっているので、試作のトップページもｍｅｔａタグなんぞはすっ飛ばして作成していたのですが、DOCTYPE宣言があるとIEでも普通に表示されるのです。
「DOCTYPEの意味を知らずに、慣例だからと安易にDOCTYPE宣言をするんじゃないよ」と解説しているHTML文法サイトがありますが、正にその通りですわねぇ・・・。DOCTYPE宣言なんてものは、載っけておくと少しはいいかも、くらいの認識でございましたね（汗)。
で、またまた志田の日記で、それはＩＥの後方互換モードというものであると教えて頂きまして、調べてみたところ、IE独自の仕様に表示してしまうものらしいことが分かりました。そういうものは、後方互換モード宣言をしたHTMLファイルにのみ反応しろよ！と思うのは素人の浅はかさでしょうか・・・(笑)。
因みに下記が省略していた宣言です。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
（＜＞を省略）
「このホームページはHTML 4.01 Transitionalで作成している」という意味は分かっていたつもりですが、その中身になると♪チンプンカンプン（by Pabo）。
