法政大学市ヶ谷基礎科目
情報処理演習II
担当 重定 如彦
2009年11月19,25日
第8回 ウェブページ製作(その3)
1. テーブル
HTMLでは、ウェブページの中に表を記述することができ、これをテーブルと呼びます。テーブルはTABLE、TR、TDという3種類のタグで記述しそれぞれ以下の意味を持ちます。
·
TABLEタグ: テーブルの開始と終了を表す。
·
TRタグ: テーブルの行を表す。
·
TDタグ: テーブルのセルを表す。
では実際にこれらを使ってテーブルを記述してみましょう。G:\wwwのhomepage.htmlの私の趣味の箇条書きの後ろに以下の文章を記述し、ブラウザで表示して下さい。
(URLはhttp://www.edu.i.hosei.ac.jp/~ユーザID/homepage.htmlです)
<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=“image/photo_ichigaya.jpg” width=”150”></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属性を除く)によって設定されるものを図でまとめます。
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 |
2 |
||
4 |
5 |
6 |
|
7 |
8 |
9 |
|
これは1行目の「1」を囲っているTDタグの中に、 COLSPAN=“2” が記述されている為、自分のセルを含んで右方向に2個分のセルが結合して表示されるのです。結合された部分のセルはなかったものとみなされるため、次のTDで記述されている <TD>2</TD>の内容は3列目に表示されるようになります。
次に、最初のTRの中身を以下のように書き換えてブラウザの表示を更新して下さい。
<TR>
<TD COLSPAN=“3”>1</TD>
</TR>
今度は以下のように3つのセルが結合されて表示されます。
1 |
|||
4 |
5 |
6 |
|
7 |
8 |
9 |
|
·
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>
以下のようなテーブルが表示されるはずです。
1 |
2 |
3 |
|
5 |
6 |
||
7 |
8 |
9 |
|
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のサイズのセルを結合した表が表示されます。
1 |
3 |
|
6 |
||
7 |
8 |
9 |
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タグを使って以下のような表を記述し、ブラウザで表示して下さい。
パ・リーグの勝敗表(2009年6月5日現在)
|
勝数 |
負数 |
引分 |
勝率 |
勝差 |
|
1 |
日本ハム |
29 |
19 |
1 |
.604 |
|
2 |
ソフトバンク |
27 |
21 |
2 |
.563 |
2.0 |
3 |
楽天 |
25 |
23 |
0 |
.521 |
2.0 |
4 |
西武 |
24 |
25 |
2 |
.490 |
1.5 |
5 |
ロッテ |
21 |
26 |
2 |
.447 |
2.0 |
6 |
オリックス |
20 |
29 |
0 |
.408 |
2.0 |
8.
課題
メモ帳で新しくファイルを開き、その中に自分のプロフィールをテーブルで記述して下さい。記述したファイルは profile.html という名前で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 |
数値 |
セルを数値の数だけ下方向に結合する |
課題のメールは水曜4限の方はasako.shibata.d2@gs-art.hosei.ac.jpにお願いします。
課題のメールは木曜5限の方はwataru.miyashita.rt@gs-eng.hosei.ac.jpにお願いします。
質問のメールなどは、 sigesada@hosei.ac.jp までお願いします。
授業の資料の最新版は http://www.edu.i.hosei.ac.jp/~sigesada/ にあります。