メールマガジン「初心者のためのホームページ作り」でお伝えした内容を、「復習」の意味で掲載しています。テキストのみのマガジンと違って、実際のサンプルや画像を交えて解説していますので、理解が深まると思います。なお、疑問点や分からない点がありましたら、遠慮なく メールにてご質問ください。

プレーンテキスト版バックナンバー

今週＜第48号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　  毎週金曜日配信　What's New 2003/4/18
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
　今週の課題 ■ XHTML講座　第11回 XHTML1.1実践 〜 テーブル

◆ テーブルによるレイアウト

テーブルの最大の弊害は、ブラウザによってはデータのすべての読み込みが完了してから表示するという特質にありページ表示に時間がかかってしまいます。小さなウィンドウサイズではページがはみ出すということも考慮しなければなりません。同時に、非視覚系ブラウザではテーブルの解釈を非常に不得意としており、情報が得られにくい面もあります。

（最新の視覚系ブラウザは読み込みと同時に順次表示できるようになりました。）

これらの点を考慮して、複雑なテーブル構文を避けるよう心がける必要があります。今回作成するテーブルは横列を１行として、非視覚系ブラウザでも適切にレンダリングできるように工夫しました。テーブル内のネスティング（入れ子）も、複雑になるために使用しておりません。

◆ 見栄えの設定

テーブルの構文で見栄えを設定する属性は、XHTML1.1では利用することができません。つまり 、HTMLで使えた各要素に、直接見栄えを設定する属性が使えません。

HTML4.01 Transitional（過渡仕様）で利用できた属性

bgcolor　背景色を設定する属性（table、tr、td要素で設定）

align　テーブルの位置を指定する要素（tr、td、th要素などは XHTMLでも利用可）

nobr　テキストの改行を禁止する属性（MSIE、Mozilla独自仕様）

bordercolor　枠線に色をつける属性（MSIE独自仕様）

基本的に、XHTML1.1では見栄えの設定はスタイルシートで行わなければなりません。本来ならば、HTML でも、「文書構造」と「見栄え」は分離すべきであり、属性で補うのはよくないとされています。

これは、多種のプラットフォームで利用される多種のブラウザに正しく情報を伝えるためであるという、本来の Webページに求められた基本中の基本であるためです。

◆ セル内に配置する要素

テーブルの各セルにはほとんどのブロックレベル要素を配置することができます。セルを３つに分けて、それぞれにリストや見出し、段落などを配置して、レイアウトを構成します。

ここで注意しなければならないのがテーブル全体の横幅です。セル内のコンテンツの大きさや自動改行してよいものなのかを判断することがポイントです。画像を利用する場合には、その大きさに注意してください。

テーブルによるレイアウト　（詳しいXHTML構文は、今週のメールマガジン「第48号」をお読みください。）

◆ テーブルを使わないレイアウトの構成

ブロックレベル要素を横に並べる構文は、テーブル以外にありません。しかし、スタイルシートを利用することにより、今回作成したテーブルの表現と同じ表現が可能です。

次週は、コンテンツを浮遊させて今回と同じレイアウトの表現を作成します。