初心者のためのホームページ作り 第45号

Web作成支援

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

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

今週<第45号>マガジンのおさらい

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

セルの連結

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

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

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

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

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

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

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

と、なります。

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

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

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

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

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

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

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



Valid XHTML 1.1! Copyright(C) 2002-2003 ばんばん banban@scollabo.com