カスタム検索
テーブルレイアウトの文書型宣言 DTD
一般的にスタイルシートを使用した場合などは、ブラウザによる表示崩れなどしにくい URI を記述した「標準モード」にするのですが、
複雑なテーブルレイアウトの場合は、
「標準モード」、「互換モード」のどちらにしたらよいでしょうか？
「互換モード」は、スタイルシートによる文字装飾に関して「継承」しない？
旧ブラウザとの互換性に考慮した「互換モード」では、テーブル内の文字装飾に関して親要素のスタイルが子要素に継承されません。 親要素だけのスタイル設定では、子要素はブラウザ側の標準スタイル設定で表示されます。従って、子要素になる入れ子のテーブル内にも、 個別に装飾スタイルを指定する必要があります。
「互換モード」で、文字サイズをテーブルの親要素だけに設定した場合の例
「標準モード」で、入れ子のテーブル内にも個別に文字装飾スタイルを指定
テンプレートで自動作成された外部スタイルシートには、タイトルや見出し以外の標準文字サイズが、子要素のテーブル個別にも 80% と設定されています。 （80% では小さすぎるのですが・・） これを、「標準モード」で表示したらどうなるでしょうか？
標準モードでは、親要素のスタイルは子要素に継承されます。そうすると 内側のテーブル内の文字サイズは、80% × 80% ×・・・になるため内側ほどサイズは小さくなり、例えば 3 個が入れ子になっていれば最も内側のテーブル内文字サイズは 51% になり、テーブルごと文字サイズが違ってしまいます。
文字サイズを％ではなく、「絶対数値」の「px（ピクセル）、pt（ポイント）」などにすれば、この件は解決します。ただし、IE のブラウザ側での文字サイズ変更「大中小」はできません。
テーブルレイアウトでは「互換モード」
「互換モード」でテーブルの子要素にも個別にスタイル設定すれば、「スタイル継承」機能がないことが幸いして 入れ子のテーブルは各個別に設定された 80% の文字サイズになります。従って、デフォルトで設定されているとおり、 「互換モード」が適しているようです。
以上の「テーブルレイアウトのDOCTYPE 設定」に関して、ややっこしいですが、まとめると次の表のようになります。
| DOCTYPE | CSS設定 (テーブル内文字) |
古いブラウザ | 新しいブラウザ |
|---|---|---|---|
| 標準モード | 親要素だけに設定 | 子要素はブラウザ側のスタイル設定で表示 | 親要素、子要素ともに正常表示 |
| 親要素と子要素の両方に設定 | 親要素、子要素ともに正常表示 | 絶対数値（px、pt などの）設定ならば正常表示 | |
| 互換モード | 親要素だけに設定 | 子要素はブラウザ側のスタイル設定で表示 | 子要素はブラウザ側のスタイル設定で表示 |
| 親要素と子要素の両方に設定 | 親要素、子要素ともに正常表示 | 親要素、子要素ともに正常表示 |
以上、CSS プロパティの「文字サイズ」で検証しましたが、他にも互換モードで 親要素からテーブル内に継承されない文字装飾のプロパティは、次のものがあります。（ブラウザにより継承するものもあるようです。）
color、font-size、font-weight、font-style、text-decoration、
text-indent、letter-spacing、line-height
この中で text-decoration、letter-spacing は、Gecko系（ NN、Firefox ）ブラウザでは継承。
text-indentは、Operaで継承。
【標準モードでも継承されないプロパティ】
text-decoration、text-indent は Gecko系で、text-indentは IEで継承しません。（IE6、Opera9、Mozilla5、Firefox2で確認）
※どちらにしても、代表的なブラウザ（ IE と Gecko 系 ）で確認するようにしましょう。
