法政大学国際文化学部

情報リテラシーI,II

担当　重定　如彦

2003年 6月 12日 10月30日

 

第16回　ウェブページ製作（その３）

1.      テーブル

HTMLでは、ウェブページの中に表を記述することができ、これをテーブルと呼びます。テーブルはTABLE、TR、TDという３種類のタグで記述しそれぞれ以下の意味を持ちます。

·           ＴＡＢＬＥタグ：     テーブルの開始と終了を表す。

·           ＴＲタグ：                テーブルの行を表す。

·           ＴＤタグ：                テーブルのセルを表す。

　それでは実際にこれらを使ってテーブルを記述してみましょう。G:\wwwのhomepage.htmの私の趣味の箇条書きの後ろに以下の文章を記述し、ブラウザで表示して下さい。

（URLはhttp://www.edu.i.hosei.ac.jp/~ユーザＩＤ/homepage.htmです）

　　＜Ｈ２＞プロフィール＜／Ｈ２＞

　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＞

　　　　＜ＴＲ＞

　　　　　　＜ＴＤ＞名前＜／ＴＤ＞

　　　　　　＜ＴＤ＞法政　太郎＜／ＴＤ＞

　　　　＜／ＴＲ＞

　　　　＜ＴＲ＞

　　　　　　＜ＴＤ＞生年月日＜／ＴＤ＞

　　　　　　＜ＴＤ＞○年○月○日＜／ＴＤ＞

　　　　＜／ＴＲ＞

　　　　＜ＴＲ＞

　　　　　　＜ＴＤ＞血液型＜／ＴＤ＞

　　　　　　＜ＴＤ＞○型＜／ＴＤ＞

　　　　＜／ＴＲ＞

　　＜／ＴＡＢＬＥ＞

　

 

　ＴＡＢＬＥタグで囲まれた部分が表の中身を表します。ＴＡＢＬＥタグにＢＯＲＤＥＲという名前の属性が記述されていますが、これはテーブルの枠を表示するという意味を持ちます。テーブルの中にはＴＲタグで囲まれた部分が３つあり、それらはそれぞれテーブルの第一行、第二行、第三行を表します。それぞれの行のセルの内容はＴＤタグで囲まれた部分で左の列から順番に記述します。結果として上記のテーブルをブラウザで表示すると以下のような表になります。下記の表と先ほどの記述したテーブルのデータを見比べて、どれがどれに対応するかを確認して下さい。

名前

法政　太郎

生年月日

○年○月○日

血液型

○型

　テーブルの基本はこれだけです。テーブルの行を増やしたければＴＲタグを行の数だけ書けば良いですし、各行のセルの数（テーブルの列の数）を増やしたければＴＲタグで囲まれた部分にセルの数だけＴＤタグを書き、その中にセルの中に書くデータを記述します。

　なお、テーブルのそれぞれのセルの中（TDタグで囲まれた部分）には、テーブルの外と同様の文章を記述することができます。例えば、ULタグやOLタグを使って箇条書きを、IMGタグを使って画像を、Aタグを使ってリンクを記述することができます。

以下の内容を、＜／ＴＡＢＬＥ＞の直前に書き加えてブラウザの表示を更新して下さい。

　　　＜ＴＲ＞

　　　　　＜ＴＤ＞職業＜／ＴＤ＞

　　　　　＜ＴＤ＞大学生。＜Ａ　ＨＲＥＦ＝“ｈｔｔｐ：／／ｗｗｗ．ｈｏｓｅｉ．ａｃ．ｊｐ”＞法政大学＜／Ａ＞に通っています＜／ＴＤ＞

　　　＜／ＴＲ＞

　また、上記の「法政大学」の文字を次のように変えることで画像にすることができます。

　　　　　＜ＴＤ＞大学生。＜Ａ　ＨＲＥＦ＝“ｈｔｔｐ：／／ｗｗｗ．ｈｏｓｅｉ．ａｃ．ｊｐ”＞＜ＩＭＧ　ＳＲＣ＝“ｈｔｔｐ：／／ｗｗｗ．ｈｏｓｅｉ．ａｃ．ｊｐ／ｉｍｇ／２２−ｌｏｇｏ．ｇｉｆ”＞＜／Ａ＞に通っています

＜／ＴＤ＞

ポイント：

·           ＴＡＢＬＥタグで囲まれた部分の内容がテーブルになる。

·           各行はＴＲタグで記述する。

·           表の各行のセルはその列を表すＴＲタグの中にＴＤタグで記述する。

·           表のセルの中に表示する内容は、対応するＴＤタグで囲まれた部分に記述する。

·           表のセルの中に表示する内容は文字だけでなく、画像も表示可能。また、Ａタグを使うことで、表の中のデータをリンクにすることもできる。

2.      表の修飾（ＴＡＢＬＥタグの属性）

表の基本は上記で述べたとおりですが、タグに属性を記述することで、表に対して様々な修飾を行うことができます。まず、ＴＡＢＬＥタグの属性について説明します。

·          ＢＯＲＤＥＲ属性

　ＢＯＲＤＥＲ属性はテーブルの枠に関する属性で、ＢＯＲＤＥＲ属性を記述するとテーブルに枠が表示されます。先ほど記述したテーブルのＴＡＢＬＥタグのＢＯＲＤＥＲ属性を消してブラウザの表示を更新し、テーブルの枠が消えることを確認して下さい。

　ＢＯＲＤＥＲ属性では、テーブルの外枠（注：内側の枠は太くなりません）の太さを設定値で設定することができます。例えば

　　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＝“１０”＞

と記述すると、枠が１０ドットの太さで表示されます。先ほどの文章のＴＡＢＬＥタグを上記のように変更してブラウザの表示を更新して下さい。

·          ＷＩＤＴＨとＨＥＩＧＨＴ属性

　ＷＩＤＴＨ属性はテーブルの横幅を指定する属性です。ＷＩＤＴＨ属性の設定値はこれまでと同様に、ドット数又は、％でウィンドウの横幅に対する比率の２種類の方法で設定できます。ＨＥＩＧＨＴ属性はテーブルの高さを指定する属性です。指定の方法はＷＩＤＴＨ属性と同様です。ＷＩＤＴＨ属性やＨＥＩＧＨＴ属性設定しなかった場合は、テーブルの幅や高さをウェブブラウザが自動的に計算して設定します。

　注：ＷＩＤＴＨ属性を指定してもテーブルの中に画像のように折り返して表示できないものが記述されていた場合は必ずしもテーブルの横幅が指定したサイズにならない場合があります。例えば、テーブルの中に横幅が２００ドットの画像があった場合、そのテーブルの横幅はどうやっても２００ドット必要なので、ＷＩＤＴＨ＝１００と指定しても横幅は１００ドットにはなりません。これはＨＥＩＧＨＴ属性についても同様です。

·          ＡＬＩＧＮ属性

　ＡＬＩＧＮ属性はテーブルの前後の文字の揃えを指定する属性で、以下の値を設定できます。ＴＡＢＬＥタグの中にＡＬＩＧＮ＝“ＣＥＮＴＥＲ”および、ＡＬＩＧＮ＝“ＲＩＧＨＴ”を記述し、ブラウザの表示を更新して表示がどうかわるかを確かめて下さい。

　（注：ＩＭＧタグのようにＴＯＰやＢＯＴＴＯＭを指定することはできません）

設定値

意味

ＬＥＦＴ

左揃えで表示。ＩＭＧタグの場合と同様にテーブルの右の部分に文字を折り返して表示

ＣＥＮＴＥＲ

中央揃えで表示。テーブルの左右には何も表示しない。

ＲＩＧＨＴ

右揃えで表示。ＩＭＧタグの場合と同様にテーブルの左の部分に文字を折り返して表示

·          ＣＥＬＬＳＰＡＣＩＮＧ属性

　ＣＥＬＬＳＰＡＣＩＮＧ属性は、表の内枠の太さを指定する属性で、太さをドット数で指定します。ＴＡＢＬＥタグの中に　　　ＣＥＬＬＳＰＡＣＩＮＧ＝“１０”

を付け加えてブラウザの表示を更新して表示がどのように変化するかを確認して下さい。

なお、ＣＥＬＬＳＰＡＣＩＮＧ属性は枠線を表示しない場合でも有効です。

·          ＣＥＬＬＰＡＤＤＩＮＧ属性

　ＣＥＬＬＰＡＤＤＩＮＧ属性は、表の内枠と、表のセルの中に表示するデータの幅を指定する属性で、幅をドット数で指定します。ＴＡＢＬＥタグの中に

　　ＣＥＬＬＰＡＤＤＩＮＧ＝“２０”　　を付け加えてブラウザの表示を更新して表示がどのように変化するかを確認して下さい。なお、ＣＥＬＬＰＡＤＤＩＮＧ属性も枠線を表示しない場合でも有効です。

·          まとめ

　ここまでで説明したＴＡＢＬＥタグの属性（ＡＬＩＮＧ属性を除く）によって設定されるものを図でまとめます。

テキスト ボックス: ＨＥＩＧＨＴ

3.      行の修飾（ＴＲタグの属性）

ＴＲタグに以下の属性を設定することで、テーブルの各行を修飾することができます。

·          ＨＥＩＧＨＴ属性

　ＨＥＩＧＨＴ属性によって、その行の高さを設定することができます。設定方法はこれまでと同様です。なお、ＴＲタグにＷＩＤＴＨ属性を設定することはできません。セルの横幅を指定するには、ＴＡＢＬＥタグの中でＷＩＤＴＨ属性を設定して下さい。

·          ＡＬＩＧＮ属性

　その行のすべてのセルに対してその中に表示するデータの横方向の揃えを指定します。ＡＬＩＧＮ属性には以下の値を設定することができます。

設定値

意味

ＬＥＦＴ

左揃えで表示

ＣＥＮＴＥＲ

中央揃えで表示

ＲＩＧＨＴ

右揃えで表示

·          ＶＡＬＩＧＮ属性

その行のすべてのセルに対してその中に表示するデータの縦方向の揃えを指定します。以下の値を設定することができます。ＶＡＬＩＧＮのＶはvertical（垂直）の頭文字です。

設定値

意味

ＴＯＰ

上揃えで表示

ＭＩＤＤＬＥ

中央揃えで表示

ＢＯＴＴＯＭ

下揃えで表示

ＡＬＩＧＮ属性とＶＡＬＩＧＮ属性は同時に設定することができます。例えば

＜ＴＲ　ＡＬＩＧＮ＝“ＲＩＧＨＴ”　ＶＡＬＩＧＮ＝“ＭＩＤＤＬＥ”＞

と指定することで、その行のセルの中身を横方向は左揃え、縦方向は中央揃えで表示することができます。さきほどのテーブルのＴＲのどれかを上記のように書き換えてブラウザの表示を更新して表示がどのように変化するかを確認して下さい。

4.      セルの修飾（ＴＤタグの属性）

ＴＤタグに以下の属性を設定することで、テーブルのセルを修飾することができます。

·          ＨＥＩＧＨＴ属性

　ＨＥＩＧＨＴ属性によって、そのセルの高さを設定することができます。同じ行の複数のセルにＨＥＩＧＨＴ属性で異なった高さを設定した場合にどうなるかはブラウザによって処理の方法が異なりますが、一般に一番大きい値が採用されるようです。

　ＴＤの中のＨＥＩＧＨＴ属性では％による指定が無効になるブラウザが多いようなので、行の高さを％で指定したい場合はＴＲタグのほうで指定して下さい。

·          ＷＩＤＴＨ属性

ＷＩＤＴＨ属性によってセルの横幅を設定できます。ＴＤの場合は幅を％で指定した場合ウィンドウの幅ではなくテーブルの横幅に対する比率になる点に注意が必要です。

 

 

·          ＡＬＩＧＮ属性とＶＡＬＩＧＮ属性

　そのセルの中のデータの揃えをＡＬＩＧＮ属性とＶＡＬＩＧＮ属性で設定することができます。設定することができる値はＴＲタグの場合と同様です。

·          ＣＯＬＳＰＡＮ属性

　テーブルのセルとセルを結合して一つのセルにすることが可能です。ＣＯＬＳＰＡＮ属性は、そのセルとその右にあるセルを設定値で指定した数だけ結合するという意味を持ちます。例えば以下のようなテーブルを新しく記述してブラウザに表示して下さい。

　＜ＴＡＢＬＥ　ＢＯＲＤＥＲ＞

　　　＜ＴＲ＞

　　　　　＜ＴＤ　ＣＯＬＳＰＡＮ＝“２”＞１＜／ＴＤ＞

　　　　　＜ＴＤ＞２＜／ＴＤ＞

　　　＜／ＴＲ＞

　　　＜ＴＲ＞

　　　　　＜ＴＤ＞４＜／ＴＤ＞

　　　　　　＜ＴＤ＞５＜／ＴＤ＞

　　　　　　＜ＴＤ＞６＜／ＴＤ＞

　　　＜／ＴＲ＞

　　　＜ＴＲ＞

　　　　　＜ＴＤ＞７＜／ＴＤ＞

　　　　　＜ＴＤ＞８＜／ＴＤ＞

　　　　　＜ＴＤ＞９＜／ＴＤ＞

　　　＜／ＴＲ＞

　＜／ＴＡＢＬＥ＞

　次のようなテーブルがブラウザに表示されるはずです。

 

１

２

４

５

６

７

８

９

 

　これは１行目の「１」を囲っているＴＤタグの中に、　ＣＯＬＳＰＡＮ＝“２”　が記述されている為、自分のセルを含んで右方向に２個分のセルが結合して表示されるのです。結合された部分のセルはなかったものとみなされるため、次のＴＤで記述されている　＜ＴＤ＞２＜／ＴＤ＞の内容は３列目に表示されるようになります。

 

 

　次に、最初のＴＲの中身を以下のように書き換えてブラウザの表示を更新して下さい。

　　　＜ＴＲ＞

　　　　　＜ＴＤ　ＣＯＬＳＰＡＮ＝“３”＞１＜／ＴＤ＞

　　　＜／ＴＲ＞

今度は以下のように３つのセルが結合されて表示されます。

１

４

５

６

７

８

９

·          ＲＯＷＳＰＡＮ属性

　ＣＯＬＳＰＡＮ属性は横方向にセルを結合する属性でしたが、ＲＯＷＳＰＡＮは縦方向にセルを結合する属性です。先ほどのテーブルのデータの最初と２番目のＴＲの中身を以下のように書き換えてブラウザの表示を更新して下さい。

　　　＜ＴＲ＞

　　　　　＜ＴＤ　ＲＯＷＳＰＡＮ＝“２”＞１＜／ＴＤ＞

　　　　　＜ＴＤ＞２＜／ＴＤ＞

　　　　　＜ＴＤ＞３＜／ＴＤ＞

　　　＜／ＴＲ＞

　　　＜ＴＲ＞

　　　　　＜ＴＤ＞５＜／ＴＤ＞

　　　　　　＜ＴＤ＞６＜／ＴＤ＞

　　　＜／ＴＲ＞

　以下のようなテーブルが表示されるはずです。

１

 

２

３

５

６

７

８

９

　ＣＯＬＳＰＡＮの場合と同様に、結合された部分のセルはなかったものとみなされるので、２つ目のＴＲの中にはＴＤは２つ分しか記述されない点に注意して下さい。

　ＣＯＬＳＰＡＮとＲＯＷＳＰＡＮを一度に設定することも可能です。先ほどのデータを次のように書き換えてブラウザの表示を更新して下さい。

 

 

 

　　　＜ＴＲ＞

　　　　　＜ＴＤ　ＣＯＬＳＰＡＮ＝“２”　ＲＯＷＳＰＡＮ＝“２”＞１＜／ＴＤ＞

　　　　　＜ＴＤ＞３＜／ＴＤ＞

　　　＜／ＴＲ＞

　　　＜ＴＲ＞

　　　　　　＜ＴＤ＞６＜／ＴＤ＞

　　　＜／ＴＲ＞

以下のように２＊２のサイズのセルを結合した表が表示されます。

１

 

３

６

７

８

９

5.      表の見出し

ＣＡＰＴＩＯＮタグによって、テーブルに見出しをつけることができます。ＣＡＰＴＩＯＮタグで囲まれた部分がテーブルの見出しとして表示されます。ＣＡＰＴＩＯＮタグは一般にＴＡＢＬＥタグの開始タグの直後に以下のように記述します。プロフィールのテーブルに以下の網掛けの部分を追加して表示を更新して下さい。

＜ＴＡＢＬＥ＞

　　＜ＣＡＰＴＩＯＮ＞○○のプロフィール＜／ＣＡＰＴＩＯＮ＞

　　＜ＴＲ＞　．．．（以下略）

6.      属性の重複や矛盾した場合の表示方法

テーブルではＷＩＤＴＨ属性やＶＡＬＩＧＮ属性のように、ＴＡＢＬＥ、ＴＲ、ＴＤのそれぞれに同じ名前の属性を記述できる場合があります。ＨＴＭＬではテーブルに限らずこのように同じ意味を持つ属性を重複して記述した場合は内側のタグで設定した値が優先されることになっています。例えば

＜ＴＲ　ＡＬＩＧＮ＝“ＣＥＮＴＥＲ”＞

　　＜ＴＤ　ＡＬＩＧＮ＝“ＲＩＧＨＴ”＞名前＜／ＴＤ＞

　　＜ＴＤ＞法政　太郎＜／ＴＤ＞

＜／ＴＲ＞

と記述した場合、外側のＴＲタグでＡＬＩＧＮ属性によって中央揃えが指定されていますが、内側のＴＤタグで改めてＡＬＩＧＮ属性によって右揃えが設定しなおされているので、このＴＤタグの中では「名前」が右揃えで表示されます。ただし、この右揃えの指定はこのＴＤタグで囲まれている中でのみで有効なので、次の「法政　太郎」のセルは外側のＴＲタグで指定された中央揃えで表示されます。

テーブルの場合、この原則にいくつか例外がありますのでそれについて説明します。

·          ＡＬＩＧＮ属性

ＴＡＢＬＥタグのＡＬＩＧＮ属性の意味（テーブルのまわりの文字の位置揃えを意味する）と、ＴＲ（又は、ＴＤタグ）のＡＬＩＧＮ属性（テーブルのセルの中身の一揃えを意味する）は意味が異なるので、この場合は重複しても問題はありません。

·          ＷＩＤＴＨ属性とＨＥＩＧＨＴ属性

ＷＩＤＴＨ属性の書き方によっては矛盾した記述を行うことが出来ます。例えば

＜ＴＡＢＬＥ　ＷＩＤＴＨ＝“３００”＞

　　＜ＴＲ＞

　　　　＜ＴＤ　ＷＩＤＴＨ＝“２００”＞１＜／ＴＤ＞

　　　　＜ＴＤ　ＷＩＤＴＨ＝“２００”＞２＜／ＴＤ＞

　　＜／ＴＲ＞

＜／ＴＡＢＬＥ＞

では、ＴＡＢＬＥタグでテーブルの全体の横幅を３００ドット、ＴＤタグで２つの列の横幅をそれぞれ２００ドットで指定しています。２００＋２００＝４００なので、テーブルの幅全体に４００ドットが必要になってしまい、矛盾が生じてしまいます。

＜ＴＡＢＬＥ＞

　　＜ＴＲ＞

　　　　＜ＴＤ　ＷＩＤＴＨ＝“２００”＞１＜／ＴＤ＞

　　＜／ＴＲ＞

　　＜ＴＲ＞

　　　　＜ＴＤ　ＷＩＤＴＨ＝“３００”＞２＜／ＴＤ＞

　　＜／ＴＲ＞

＜／ＴＡＢＬＥ＞

次の例では、一行目で一列目のセルの横幅を２００ドット、二行目で一列目のセルの横幅を３００ドットに指定しており、矛盾が生じてしまいます。同様に、ＨＥＩＧＨＴ、ＣＯＬＳＰＡＮ、ＲＯＷＳＰＡＮ属性にも同様に矛盾した属性値を記述することが可能です。このような矛盾が生じた場合は、ブラウザにどのようなテーブルが表示されるかは特に決まっておらず、それぞれのブラウザが独自の判断で表示方法を決定します。

このようにテーブルの場合に限らずウェブブラウザはＨＴＭＬの中に矛盾や記述ミスがあってもエラーとはせずに独自の判断でなんとか表示しようとするという性質を持っています。ページの表示がおかしい場合はＨＴＭＬにミスがないかチェックして下さい。

7.      練習問題

　ＴＡＢＬＥタグを使って以下のような表を記述し、ブラウザで表示して下さい。

 

セ･リーグの勝敗表（2003年6月9日現在）

 

勝数

負数

引分

勝率

勝差

1

阪神

39

19

1

.672

 

2

巨人

30

26

1

.535

8.0

3

ヤクルト

29

27

0

.517

1.0

4

中日

30

28

0

.517

0.0

5

広島

22

29

0

.431

4.5

6

横浜

17

38

0

.309

7.0

8.      課題

メモ帳で新しくファイルを開き、その中に自分のプロフィールをテーブルで記述して下さい。記述したファイルは　profile.htm　という名前でGドライブのwwwフォルダに保存し、添付ファイルで課題のメールとして提出して下さい。なお、ファイルは以下のように記述して下さい。

＜ＨＴＭＬ＞

＜ＨＥＡＤ＞

＜ＴＩＴＬＥ＞○○のプロフィール＜／ＴＩＴＬＥ＞

＜／ＨＥＡＤ＞

　　　＜ＢＯＤＹ＞

　　　　　〜ここにＴＡＢＬＥタグを使ってプロフィールを書いて下さい〜

　　　＜／ＢＯＤＹ＞

　＜／ＨＴＭＬ＞

　プロフィールのテーブルとしては、以下のようなテーブルを作って下さい。

·           テーブルの最初の３行は必ず、「名前」、「学部」、「学生証番号」にして、それを含めて７つ以上の項目を記述して下さい。

·           みなさんのプライバシーの問題がありますので、明かしたくないと思った項目については必ずしも正しいデータを記述しなくてもかまいません。「名前」、「学部」、「学生証番号」以外のところは架空のデータでもＯＫということです。また、書いたデータが架空のものであるかどうかを記述する必要もありません。

 

·           ○○のプロフィールの部分はＣＡＰＴＩＯＮを使うのではなく、ＴＤタグのＣＯＬＳＰＡＮ属性を使って記述して下さい。

·           もし余裕があれば、今日の授業の知識を元に他の項目などを加えたり、色々な属性を使って凝ったテーブルを作ってみて下さい。

○○のプロフィール

名前

○○　○○

学部

○○学部　○年○組

学生証番号

○○○○

生年月日

・・・・・

特技

・・・・・

・・・

・・・・・

9.      今回の授業で出てきたタグと属性の一覧

タグ

意味

終了タグ

属性

備考

TABLE

テーブルの開始と終了

必要

BORDER

WIDTH

HEIGHT

ALIGN

CELLSPACING

CELLPADDING

外枠の幅

横幅

高さ

揃え

内枠の太さ

内枠とセルの中身の幅

TR

テーブルの行

省略可

HEIGHT

ALIGN

VALIGN

行の高さ

横の揃え

縦の揃え

TD

テーブルのセル

省略可

WIDTH

HEIGHT

ALIGN

VALIGN

COLSPAN

ROWSPAN

セルの幅

セルの高さ

横の揃え

縦の揃え

横方向の結合

縦方向の結合

CAPTION

テーブルの見出し

省略可

 

 

 

 

 

属性

設定値

意味

BORDER

数値

テーブルの外枠のドット数

WIDTH

数値、％

横幅。TDの場合の％はテーブルの横幅に対する比率

HEIGHT

数値、％

縦幅

TABLEタグのALIGN

LEFT

テーブルを右揃えにし、テーブルの前後の文字をテーブルの右で折り返すようにする。

RIGHT

テーブルを左揃えにし、テーブルの前後の文字をテーブルの左で折り返すようにする。

CENTER

テーブルを中央揃えにする。

TR,TDタグのALIGN

LEFT

セルの中身を左揃えにする

CENTER

セルの中身を（横方向に対して）中央揃えにする

RIGHT

セルの中身を右揃えにする

VALIGN

TOP

セルの中身を上揃えにする

MIDDLE

セルの中身を（縦方向に対して）中央揃えにする

BOTTOM

セルの中身を下揃えにする

CELLSPACING

数値

表の内枠のドット数

CELLPADDING

数値

内枠とセルの中身の幅のドット数

COLSPAN

数値

セルを数値の数だけ右方向に結合する

ROWSPAN

数値

セルを数値の数だけ下方向に結合する

 

 

 

質問のメールなどは、sigesada@edu.i.hosei.ac.jpまでお願いします。

授業の資料の最新版はhttp://www.edu.i.hosei.ac.jp/~sigesada/にあります。