法政大学国際文化学部

情報リテラシーI,II

担当 重定 如彦

2003 6 12 1030

 

16回 ウェブページ製作(その3)

1.      テーブル

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

·           TABLEタグ:     テーブルの開始と終了を表す。

·           TRタグ:                テーブルのを表す。

·           TDタグ:                テーブルのセルを表す。

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

URLhttp://www.edu.i.hosei.ac.jp/~ユーザID/homepage.htmです)

  <H2>プロフィール</H2>

  <TABLE BORDER>

    <TR>

      <TD>名前</TD>

      <TD>法政 太郎</TD>

    </TR>

    <TR>

      <TD>生年月日</TD>

      <TD>○年○月○日</TD>

    </TR>

    <TR>

      <TD>血液型</TD>

      <TD>○型</TD>

    </TR>

  </TABLE>

 

 

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

名前

法政 太郎

生年月日

○年○月○日

血液型

○型

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

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

以下の内容を、</TABLE>の直前に書き加えてブラウザの表示を更新して下さい。

   <TR>

     <TD>職業</TD>

     <TD>大学生。<A HREF=“http://www.hosei.ac.jp”>法政大学</A>に通っています</TD>

   </TR>

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

     <TD>大学生。<A HREF=“http://www.hosei.ac.jp”><IMG SRC=“http://www.hosei.ac.jp/img/22−logo.gif”></A>に通っています

</TD>

ポイント:

·           TABLEタグで囲まれた部分の内容がテーブルになる。

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

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

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

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

2.      表の修飾(TABLEタグの属性)

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

·          BORDER属性

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

 BORDER属性では、テーブルの外枠(注:内側の枠は太くなりません)の太さを設定値で設定することができます。例えば

  <TABLE BORDER=“10”>

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

·          WIDTHとHEIGHT属性

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

 注:WIDTH属性を指定してもテーブルの中に画像のように折り返して表示できないものが記述されていた場合は必ずしもテーブルの横幅が指定したサイズにならない場合があります。例えば、テーブルの中に横幅が200ドットの画像があった場合、そのテーブルの横幅はどうやっても200ドット必要なので、WIDTH=100と指定しても横幅は100ドットにはなりません。これはHEIGHT属性についても同様です。

·          ALIGN属性

 ALIGN属性はテーブルの前後の文字の揃えを指定する属性で、以下の値を設定できます。TABLEタグの中にALIGN=“CENTER”および、ALIGN=“RIGHT”を記述し、ブラウザの表示を更新して表示がどうかわるかを確かめて下さい。

 (注:IMGタグのようにTOPやBOTTOMを指定することはできません)

設定値

意味

LEFT

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

CENTER

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

RIGHT

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

·          CELLSPACING属性

 CELLSPACING属性は、表の内枠の太さを指定する属性で、太さをドット数で指定します。TABLEタグの中に   CELLSPACING=“10”

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

なお、CELLSPACING属性は枠線を表示しない場合でも有効です。

·          CELLPADDING属性

 CELLPADDING属性は、表の内枠と、表のセルの中に表示するデータの幅を指定する属性で、幅をドット数で指定します。TABLEタグの中に

  CELLPADDING=“20”  を付け加えてブラウザの表示を更新して表示がどのように変化するかを確認して下さい。なお、CELLPADDING属性も枠線を表示しない場合でも有効です。

·          まとめ

 ここまでで説明したTABLEタグの属性(ALING属性を除く)によって設定されるものを図でまとめます。

テキスト ボックス: HEIGHT

3.      行の修飾(TRタグの属性)

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

·          HEIGHT属性

 HEIGHT属性によって、その行の高さを設定することができます。設定方法はこれまでと同様です。なお、TRタグにWIDTH属性を設定することはできません。セルの横幅を指定するには、TABLEタグの中でWIDTH属性を設定して下さい。

·          ALIGN属性

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

設定値

意味

LEFT

左揃えで表示

CENTER

中央揃えで表示

RIGHT

右揃えで表示

·          VALIGN属性

その行のすべてのセルに対してその中に表示するデータの縦方向の揃えを指定します。以下の値を設定することができます。VALIGNのVはvertical(垂直)の頭文字です。

設定値

意味

TOP

上揃えで表示

MIDDLE

中央揃えで表示

BOTTOM

下揃えで表示

ALIGN属性とVALIGN属性は同時に設定することができます。例えば

<TR ALIGN=“RIGHT” VALIGN=“MIDDLE”>

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

4.      セルの修飾(TDタグの属性)

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

·          HEIGHT属性

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

 TDの中のHEIGHT属性では%による指定が無効になるブラウザが多いようなので、行の高さを%で指定したい場合はTRタグのほうで指定して下さい。

·          WIDTH属性

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

 

 

·          ALIGN属性とVALIGN属性

 そのセルの中のデータの揃えをALIGN属性とVALIGN属性で設定することができます。設定することができる値はTRタグの場合と同様です。

·          COLSPAN属性

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

 <TABLE BORDER>

   <TR>

     <TD COLSPAN=“2”>1</TD>

     <TD>2</TD>

   </TR>

   <TR>

     <TD>4</TD>

      <TD>5</TD>

      <TD>6</TD>

   </TR>

   <TR>

     <TD>7</TD>

     <TD>8</TD>

     <TD>9</TD>

   </TR>

 </TABLE>

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

 

 

 これは1行目の「1」を囲っているTDタグの中に、 COLSPAN=“” が記述されている為、自分のセルを含んで右方向に個分のセルが結合して表示されるのです。結合された部分のセルはなかったものとみなされるため、次のTDで記述されている <TD>2</TD>の内容は3列目に表示されるようになります。

 

 

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

   <TR>

     <TD COLSPAN=“3”>1</TD>

   </TR>

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

·          ROWSPAN属性

 COLSPAN属性は横方向にセルを結合する属性でしたが、ROWSPANは縦方向にセルを結合する属性です。先ほどのテーブルのデータの最初と2番目のTRの中身を以下のように書き換えてブラウザの表示を更新して下さい。

   <TR>

     <TD ROWSPAN=“2”>1</TD>

     <TD>2</TD>

     <TD>3</TD>

   </TR>

   <TR>

     <TD>5</TD>

      <TD>6</TD>

   </TR>

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

 

 COLSPANの場合と同様に、結合された部分のセルはなかったものとみなされるので、2つ目のTRの中にはTDは2つ分しか記述されない点に注意して下さい。

 COLSPANとROWSPANを一度に設定することも可能です。先ほどのデータを次のように書き換えてブラウザの表示を更新して下さい。

 

 

 

   <TR>

     <TD COLSPAN=“2” ROWSPAN=“2”>1</TD>

     <TD>3</TD>

   </TR>

   <TR>

      <TD>6</TD>

   </TR>

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

 

5.      表の見出し

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

<TABLE>

  <CAPTION>○○のプロフィール</CAPTION>

  <TR> ...(以下略)

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

テーブルではWIDTH属性やVALIGN属性のように、TABLE、TR、TDのそれぞれに同じ名前の属性を記述できる場合があります。HTMLではテーブルに限らずこのように同じ意味を持つ属性を重複して記述した場合は内側のタグで設定した値が優先されることになっています。例えば

<TR ALIGN=“CENTER”>

  <TD ALIGN=“RIGHT”>名前</TD>

  <TD>法政 太郎</TD>

</TR>

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

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

·          ALIGN属性

TABLEタグのALIGN属性の意味(テーブルのまわりの文字の位置揃えを意味する)と、TR(又は、TDタグ)のALIGN属性(テーブルのセルの中身の一揃えを意味する)は意味が異なるので、この場合は重複しても問題はありません。

·          WIDTH属性とHEIGHT属性

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

<TABLE WIDTH=“300”>

  <TR>

    <TD WIDTH=“200”>1</TD>

    <TD WIDTH=“200”>2</TD>

  </TR>

</TABLE>

では、TABLEタグでテーブルの全体の横幅を300ドット、TDタグで2つの列の横幅をそれぞれ200ドットで指定しています。200+200=400なので、テーブルの幅全体に400ドットが必要になってしまい、矛盾が生じてしまいます。

<TABLE>

  <TR>

    <TD WIDTH=“200”>1</TD>

  </TR>

  <TR>

    <TD WIDTH=“300”>2</TD>

  </TR>

</TABLE>

次の例では、一行目で一列目のセルの横幅を200ドット、二行目で一列目のセルの横幅を300ドットに指定しており、矛盾が生じてしまいます。同様に、HEIGHT、COLSPAN、ROWSPAN属性にも同様に矛盾した属性値を記述することが可能です。このような矛盾が生じた場合は、ブラウザにどのようなテーブルが表示されるかは特に決まっておらず、それぞれのブラウザが独自の判断で表示方法を決定します。

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

7.      練習問題

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

 

セ・リーグの勝敗表(200369日現在)

 

勝数

負数

引分

勝率

勝差

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フォルダに保存し、添付ファイルで課題のメールとして提出して下さい。なお、ファイルは以下のように記述して下さい。

<HTML>

<HEAD>

<TITLE>○○のプロフィール</TITLE>

</HEAD>

   <BODY>

     〜ここにTABLEタグを使ってプロフィールを書いて下さい〜

   </BODY>

 </HTML>

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

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

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

 

·           ○○のプロフィールの部分はCAPTIONを使うのではなく、TDタグのCOLSPAN属性を使って記述して下さい。

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

○○のプロフィール

名前

○○ ○○

学部

○○学部 ○年○組

学生証番号

○○○○

生年月日

・・・・・

特技

・・・・・

・・・

・・・・・

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/にあります。