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

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

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

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

◆ テーブルと表組

テーブルというのは、簡単に言えば「表組」のことです。統計やリストなどの表現には適した構文といえます。しかしながら、初心者にとってテーブルは非常につかみにくいのも事実です。

今回より数回に分けて魅力的なテーブルの作成に徹底的に取り組みます。まずは慣れることが大切です。ある程度の「慣れ」ができれば、テーブルはそれほど難しいことではありません。

"> 左図は、マイクロソフトのエクセルという表計算ソフトで作った「学年末テスト」の結果を一覧にした「表組」をキャプチャーして画像にしたものです。この表における１つのマス目を「セル」と呼びます。

この図を元にテーブルを作成していきます。ただし、必ずしも表計算ソフトと同じような表示や計算などはできませんが、Webページ独自のダイナミックな「表組」をテーブルによって表現できるようになります。
（エクセルの画面をクリックすると大きい画像が現れます。JavaScriptを利用しています。合計29KB）

◆ テーブルの作成 Part１

まず最初にテーブル作成を作りますが、利用する要素は以下のとおりです。

（なお、これもテーブルで作成しています。）

要素名	機能
table	テーブルの範囲を設定します。終了タグまでの範囲がテーブルとなります
tr	テーブルの横列を形成するもので、この中にデータセルが配置されます
td	１つのマス目を示すデータセルを表します

3つの要素の組み合わせたテーブル   （詳しい XHTML構文は今週のメールマガジン「第44号」を参照しててください。）

◆ テーブルの作成 Part２

テーブルの構文のデフォルト（初期値）では、枠線を表示してくれません。各セルに枠線を表示することによって表組が一段と読みやすくなります。

また、ブラウザの種類に異なりますが、そのほとんどのデフォルトではセルとセルの間に余白を設けています。枠線を表示させた場合、このセル間の余白が邪魔になる場合があり、これを打ち消し、 セル内に余白を設けて枠線とセル内のデータがくっつき過ぎないように設定します。

同時に、表組の一番上の横列はヘッダにあたる部分なので、th要素（見出しセル）を使います。

セルに関する余白の設定を示す属性 （table要素内に配置します）

属性名	機能
border	テーブル内のすべてのセルにピクセル単位で枠線を表示します
cellspacing	セルとセルの間の余白を、ピクセル単位で設定します
cellpadding	セル内の余白（padding）を、ピクセル単位で設定します

枠線とセル内に余白を設定したテーブル   （詳しい XHTML構文は今週のメールマガジン「第44号」を参照しててください。）

◆ テーブルの作成 Part３

次にセルをグループ化してそれぞれにスタイルを設定します。大きく分けてグループ化する方法は、横列のグループ化と、縦列のグループ化があります。

■ 横列のグループ化

テーブルの横列を設定する要素は次のとおりです。いずれも tr要素前で記述します。なお、それぞれのグループ化する要素の終了タグは必須です。

要素名	機能
thead	横列をすべてテーブルのヘッダ部とし、テーブル最上位に表示されます
tbody	テーブル本体をあらわし複数の横列の設定が可能です（デフォルト値）
tfoot	横列のすべてをテーブルのフッタ部とし、テーブル最下位に表示されます

tbody要素のデフォルト値とは通常、ブラウザ側で自動的に補完するもので、特にテーブル構文内でこの要素の記述がない場合に適用されます。

横列のセルをグループ化したテーブル   （詳しい XHTML構文は今週のメールマガジンを参照しててください。）

■ 縦列のグループ化

続いて、縦列をグループ化する要素を加えて、よりいっそう表組として読みやすいように設定します。横列をグループ化する要素は以下のとおりです。

要素名	機能
colgroup	縦の列をまとめて設定する場合に用います
col	縦の列を個別に設定する場合に用いますが、その場合、colgroup内のspan属性を利用できない場合があります（文法的にも違反となります）

縦列のセルのグループ化を追加したテーブル   （詳しい XHTML構文は今週のメールマガジンを参照しててください。）

次回はセルの結合と、セル内のコンテンツの位置について解説します。