【７】表の利用

○基礎知識

１．表を作成するときは、＜table＞＜/table＞ のタグで表を作ることを宣言し、その
　　間に、行を作成する ＜tr＞＜/tr＞を入力します。さらにその間に ＜td＞＜/td＞
　　を入力して、ひとつひとつの『セル』を定義していきます。

　☆縦横の罫線で区切られた四角い部分を『セル』といいます。

２．罫線をすべて消してしまうこともできます。またセルの中には文字列ばかりでなく
　　画像を入れることもできます。

３．この『テーブル』をうまく活用すると、かなり凝ったＨＰの作成が可能です。

○ＨＴＭＬ入力

�@．「平成維新憲章」の文を表の中に入れます。

　☆「平成維新憲章」の文字列を見出しとし、その下に、左側に１〜３、右側に４〜５
　　を配置する形の表を作ります。

　ａ．「kensyo.html」のソースを表示させます。

　ｂ．「平成維新憲章」の文全体を挟む ＜pre＞＜/pre＞ を一度削除します。

　ｃ．＜pre＞ のあった位置に下記のように『テーブル』のタグを入力します。

　　　＜table align="center" border="5" bordercolor="blue" cellpadding="5"＞

　☆ align は表の位置、border は表の外枠の太さ、bordercolor は線の色を指定して
　　 います。また、cellpadding　は、セルの余白を設定する属性です。

　ｄ．続けて ＜tr＞で行の開始を指定し、さらに ＜th colspan="2"＞と入力します。

　☆ th は表の見出しを設定するタグで、colspan はセルの横の結合を指定する属性で
　　 す。 "2" は、結合するセルの数を表しています。

　ｅ．見出しの「平成維新憲章」の文字列を挟む ＜i＞＜/i＞ を削除し、 字体を斜体
　　　から戻します。

　ｆ．＜/font＞ の次に見出し終了の＜/th＞、続けて行終了の＜/tr＞を入力します。

　ｇ．続けて、新しい行の始まりの ＜tr＞ を入力し、セルの開始の ＜td＞ 、続けて
　　　桁ずれを直す ＜pre＞ を入力します。

　ｈ．憲章の３の最後の文字列（⇒ ます。）の下の行に、＜/pre＞＜/td＞ と入力し、
　　　セルを一度閉じます。

　ｉ．憲章の４の文の前の行にも、セルの開始の ＜td＞ と ＜pre＞ を入力します。

　ｊ．憲章の５の最後の文字列の下の行に、＜/pre＞＜/td＞＜/tr＞＜/table＞と入力
　　　し、セル、行、テーブルを終了させます。

　☆表は、一番長い文字列に合わせて全体の大きさが変更されます。上記のままだと、
　　憲章１の文の２行目に「、」がひとつ余計に入っているので、表の左右のバランス
　　が崩れます。バランスを合わせるために「、」は削除して下さい。

　☆１〜３と４〜５では行数が異なります。ですから５の下に ［Enter］で改行をいく
　　つか入れて下さい。また、適当に［Enter］ で改行し、全体のバランスを取って下
　　さい。（ pre で文を挟んでいるので［Enter］でＯＫです。）

　ｋ．上書き保存し、ＨＰに画面を切替え更新し、表ができているか確認して下さい。

　　　　　　　　　　　《ＨＰ「第２学習会−その７の完成ＨＰ」の�@が見本です。》

�A．�@で作った表の罫線を消してみます。

　ａ．＜table＞ から ＜/table＞ までをすべてコピーし、＜/table＞の下の行に貼り
　　　付けます（間にいくつか ＜br＞ の改行を入れて見やすくして下さい）。

　☆ ＜table＞ から ＜/table＞ まで、同じものが２つできたことになります。

　ｂ．コピーした方の border の値を０にし、 bordercolor の属性を削除します。

　　　＜table align="center" border="0" cellpadding="5"＞

　☆ border の値を０にすると罫線は外枠も含めて表示されません。

　ｃ．上書き保存、更新し、罫線がなくなっているかを確認して下さい。

　　　　　　　　　　　　　　　　　　　《「その７の完成ＨＰ」の�Aが見本です。》

�B．�@で作った表を変形させます。

　☆「平成維新憲章」の表題及び１〜３を一つの表とし、表題の下に、１〜３を一行の
　　文字数を変更して横に並べます。
　　また、４〜５も一つの表とし、現在の大きさで横に並べます。

　ａ．�@の ＜table＞ から ＜/table＞ までをコピーし、�Aの ＜/table＞の下の行に
　　　貼り付けます（間にいくつか ＜br＞ の改行を入れて見やすくして下さい）。

　ｂ．線の色をブルーからグリーンに変更します。

　☆ bordercolor の値を、blue から green に変更します。　

　　 ＜table align="center" border="5" bordercolor="green" cellpadding="5"＞

　☆１６種類の色は、名前で指定することができます。＊＊＊Ｐ２２５参照＊＊＊

　ｃ．結合させるセルの数が三つになるので、colspan の値を３に変更します。

　ｄ．憲章文の１と２の間、２と３の間に、＜/pre＞＜/td＞＜td＞＜pre＞　を入れ、
　　　セルを別々にします。

　ｅ．１〜３の文章を一行の文字数が１５文字（スペースも入れて）になるように修正
　　　します。

　☆�@で削除した、憲章１の「、」をここで復活させて下さい。

　ｆ．３の文章の下の＜/pre＞＜/td＞＜td＞＜pre＞のうち、＜td＞＜pre＞を削除し、
　　　そこに行とテーブルの終了タグ ＜/tr＞＜/table＞ を入力し、表を閉じます。

　ｇ．４〜５は別の表にするので、続けて、＜table 〜 ＞ をコピーして貼り付け、行
　　　の開始タグ等もコピーして貼り付けます。

 　　＜table align="center" border="5" bordercolor="green" cellpadding="5"＞
     ＜tr＞＜td＞＜pre＞

　ｈ．４と５の間にも、＜/pre＞＜/td＞＜td＞＜pre＞ を入れます。

　ｉ．上書き保存、更新し、表の形が変わっているのを確認して下さい。

　　　　　　　　　　　　　　　　　　　《「その７の完成ＨＰ」の�Bが見本です。》

�C．�Bで作った表の罫線を消し、各セルに背景色をつけます。

　ａ．�Bの ＜table＞ から ＜/table＞ までをコピーし、 下の行に貼り付けます。

　ｂ．border の値を０にし、 bordercolor の属性を削除します。

　ｃ．見出しの ＜th＞ 及び、セル開始の ＜td＞ に bgcolor の属性を追加し、それ
　　　ぞれに色のコードを指定します。

　☆見出し ⇒ ＜th bgcolor="#ffbb33" colspan="3"＞
    憲章の１ ⇒ ＜td bgcolor="#ffddff"＞　憲章の２ ⇒ ＜td bgcolor="#bbffff"＞
　　憲章の３ ⇒ ＜td bgcolor="#bbff00"＞　憲章の４ ⇒ ＜td bgcolor="#ffbb99"＞
　　憲章の５ ⇒ ＜td bgcolor="#ffff55"＞

　ｄ．上書き保存し、ＨＰに画面を切替え更新し、罫線がなくなり、それぞれのセルが
　　　カラフルになっていることを確認して下さい。

　　　　　　　　　　　　　　　　　　　《「その７の完成ＨＰ」の�Cが見本です。》

　☆画面上のセルの背景色は、印刷には反映されません。

　　　　　　　↓

◎これで第７回目は終了です。

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会【その８】へ

　　　　　　　　　　　　　　　　　　　　　　　　　　　第２回学習会　目次へ