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

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

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

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

◆ セルの連結

テーブルにおけるセルの連結とは、複数のセルを１つに結合することを指します。具体的には横列のセル、縦列のセル、あるいは両方のセルをまとめて設定します。

以下の属性を td要素の属性として記述することにより、セルを連結します。

colspan	横列の右方向のセルを結合します。
rowspan	縦列の下方向のセルと結合します。

例えば、あるセルを右方向にあるセルと結合する場合には、

<td colspan="2">セル</td>

このように、属性値に数値を記述して連結したいセルの数を設定します。同じように縦方向の列のセルを連結する場合には、

<td rowspan="2">セル</td>

と、なります。

以下の表をテーブルで記述する場合に、セルの連結を利用して表現させます。

  ┌──────┬─────────┬───┬───────────┐
  │    氏名    │       成績       │ 判定 │   総合評価 /ランク   │
  ├──────┼────┬────┼───┼───────────┤
  │            │  国語  │  24点  │ 追試 │ 極めて不真面目で意欲 │
  │            ├────┼────┼───┤ を感じない。         │
  │            │  数学  │  30点  │ 追試 │   総合的に判断し１年 │
  │  ばんばん  ├────┼────┼───┤ の留年もやむを得ない │
  │            │  英語  │  20点  │ 落第 │ と判断した。         │
  │            ├────┼────┼───┼───────────┤
  │            │  歴史  │   5点  │ 落第 │     99位/100人中     │
  └──────┴────┴────┴───┴───────────┘

セルの連結を施したテーブル　  （テーブルの構文はメールマガジン「第45号」を参照してください。）

◆ セル内のコンテンツの位置指定

セル内のコンテンツの位置を指定する属性は２種類あり、水平方向の位置指定、垂直方向の位置指定が可能です。両者ともtd要素の属性として記述します。

属性	値	機能
align 水平方向	left	セルの左側にコンテンツを配置する（デフォルト値）
	center	セルの中央に配置する
	right	セルの右側に配置する
	justify	セル内で均等に配置する
	char	char属性で指定した文字の位置に揃える
valign 垂直方向	top	セルの上側にコンテンツを配置する
	middle	セル内の中央に配置する（デフォルト値）
	bottom	セル内の下側に配置する
	baseline	１行目のベースラインに合わせる

align属性で charを指定する場合、char属性をあらかじめ設定しておく必要があります。