150

３ タグの基本(Ⅲ)………表

基本１８-1

< 数値 >table border=" "< >< >セル< >< >tr td /td /tr< >/table

で表をつくる

作業終了後［table1 ]で保存.html

< 数値 >の 数値 は、線の太さで、ピクセル数で指定します。table border=" " " "線を で指定しますと、枠線が無表示になります(透明な線が書かれたとでも理"0"解しましょうか)。

また 「 数値 」を取り除き、< >のみにしますと、１ピクセルの線が引、 =" " table boderかれます。

< > < >の中に書かれる < >< >は、表の１行を表し、table /table tr /tr< >< >は、１行の中の列(セルといいます)を表します。td /td

border 10参照：< >がない表………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる< >title /title< >/head< >body< >table border="2"< >< >学校名< >< >川村学園女子大学< >< >tr td /td td /td /tr< >< >学部名< >< >文学部< >< >tr td /td td /td /tr< >< >学部名< >< >教育学部< >< >tr td /td td /td /tr< >< >学部名< >< >人間文化学部< >< >tr td /td td /td /tr< >/table< >/body< >/html

151

☆ホームページ☆

● 保存

で保存する。table1.html

● ブラウザで閲覧する

セルの幅は、一番長い文字列に合わされます。

ここでは、川村学園女子大学にセルの幅が合わされ、表がつくられて

います。

○参考：見出しセルにする

< >< >セル< >< > のタグのうち < >< > を < >< >に代えて、tr td /td /tr td /td th /th< >< >セル< >< > にしますと、tr td /td /tr当該セルは、見出しセルになります。

見出しセルとは、文字列が太字でセルの中央揃えになるということです。

152

基本１８-2

< >table< >< 数値 数値 >セル< >< >tr td width=" " height=" " /td /tr< >/table

でセルの大きさを指定する

作業終了後［table2 ]で保存.html

< 数値 >の 数値 は、セルの横幅を指定します。td width=" " " "< 数値 >の 数値 は、セルの高さを指定します。td height=" " " "<…… 数値 >は、セルの横幅もセルの高さもともに、ピクセル数です。=" "

●メモ帳で入力……… 表をつくる

< >html< >head< >表をつくる－セルの幅と高さを指定< >title /title< >/head< >body< >table border="2"< >< >学校名< >< >川村学園女子大学< >< >tr td width="80" height="30" /td td /td /tr< >< >学部名< >< >文学部< >< >tr td /td td /td /tr< >< >学部名< >< >教育学部< >< >tr td /td td /td /tr< >< >学部名< >< >人間文化学部< >< >tr td /td td /td /tr< >/table< >/body< >/html

● 保存

で保存する。table2.html

● ブラウザで閲覧する

153

☆ホームページ☆

学校名のセルに指定した は、学部名のセルにも影響を及ぼしています。width="80"学校名のセルの横幅を広げておいて、学部名のセルの横幅をそのままというわけに

はいかないですよね。

、 、学校名のセルに指定した は 学部名のセルには影響は及んでいませんがheight="30"右側の川村学園女子大学のセルには影響を及ぼしています。

この関係をよく理解してください。

154

基本１８-3

< >table< >< 位置 >セルの文字列< >< >tr td align=" " /td /tr< >/table

でセル中の文字の横位置を指定する

作業終了後［table3 ]で保存.html

文字の位置は、セルの横位置を指定し、

「 「 「 」の３種です。left center right」 」

「 」は、セルの左端を、left「 」は、セルの中央を、center「 」は、セルの右端を指定します。rightまた、無指定は 「 」となります。、 left

5参照：縦位置の指定………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－セル中の文字の位置を指定< >title /title< >/head< >body< >table border="2"< >< >学校名< >< >川村学園女子大学< >< >tr td width="80" height="30" /td td /td /tr< >< >学部名< >< >文学部< >< >tr td align="right" /td td /td /tr< >< >学部名< >< >教育学部< >< >tr td align="right" /td td /td /tr< >< >学部名< >< >人間文化学部< >< >tr td align="right" /td td /td /tr< >/table< >/body< >/html

● 保存

で保存する。table3.html

155

☆ホームページ☆

● ブラウザで閲覧する

○参考：表にタイトルを付ける

< >table border="2"< >文字列< >caption align="left , center , right" valign="top , bottom" /caption< >< >セル< >< >tr td /td /tr< >/table

で、表の枠外にタイトルを設定します。

○参考：セル間のマージンを設定する

< セルの間隔 >セル< >table cellspacing=" " /tableで、セルとセルの間のマージンを設定します。

セルの間隔は、ピクセル数で指定します。

無指定の場合は、２ピクセルのマージンが設定されます。

○参考：セル内のマージンを設定する

< セル内の間隔 >セル< >table cellpadding=" " /tableで、セル内のマージンを設定します

セルの間隔は、ピクセル数で指定します。

無指定の場合は、１ピクセルのマージンが設定されます。

156

基本１８-4

< >table< >< 数値 >セル< >< >tr td rowspan=" " /td /tr< >/table

でセルの行を結合する

作業終了後［table4 ]で保存.html

セルを縦に結合するには、

< セルの行数 >のタグで指定します。td rowspan=" "したがって、

数値 は、結合したい(１つのセルにしたい)セルの行数です。" "

-6参照：セルの列数の結合………基本１８

-8行数の結合セルを複数つくる………基本１８

●メモ帳で入力……… 表をつくる

< >html< >head< >表をつくる－セルの行を結合< >title /title< >/head< >body< >table border="2"< >< >学校名< >< >川村学園女子大学< >< >tr td width="80" height="30" /td td /td /tr< >< >学部名< >< >文学部< >< >tr td align="right" rowspan="3" /td td /td /tr< >< >教育学部< >< >tr td /td /tr< >< >人間文化学部< >< >tr td /td /tr< >/table< >/body< >/html

● 保存

で保存する。table4.html

157

☆ホームページ☆

● ブラウザで閲覧する

で指定された「学部名」のセルでは、rowspan="3"学部名が縦位置で中央に表示されています。

158

基本１８-5

< >table< >< 位置 >セルの文字列< >< >tr td valign=" " /td /tr< >/table

でセル中の文字の縦位置を指定する

作業終了後［table5 ]で保存.html

セルの高さを高くしたセル中の文字列の縦位置を指定するには、

< 縦位置 >セルの文字列< >を使います。td valign=" " /td縦位置の指定は、

上端は、 、"top"中央は、 、"middle"下端は、 、"bottom"最下端は、 の４位置です。"baseline"

3参照：横位置の指定………基本１８ｰ

4セルの行の結合………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－セル中の文字の縦位置を指定< >title /title< >/head< >body< >table border="2"< >< >学校名< >< >川村学園女子大学< >< >tr td width="80" height="30" /td td /td /tr< >< >学部名< >< >文学部< >< >tr td align="right" valign="top" rowspan="3" /td td /td /tr< >< >教育学部< >< >tr td /td /tr< >< >人間文化学部< >< >tr td /td /tr< >/table< >/body< >/html

159

☆ホームページ☆

● 保存

で保存する。table5.html

● ブラウザで閲覧する

160

基本１８-6

< >table< >< 数値 >セル< >< >tr td colspan=" " /td /tr< >/table

でセルの列を結合する

セルの列数 の場合="2"作業終了後［table6 ]で保存.html

セルを横に結合するには、< 数値 >のタグで、td colspan=" "結合するセルの列数を指定します。

-4参照：セルの行数の結合………基本１８

="3" -7セルの列数が の場合………基本１８

●メモ帳で入力

< >html< >head< >表をつくる－セルの列を結合< >title /title< >/head< >body< >table border="2"< >< >川村学園女子大学< >< >tr td colspan="2" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >/tr< >< >教育学部< >< >tr td /td /tr< >< >人間文化学部< >< >tr td /td /tr< >/table< >/body< >/html

● 保存

で保存する。table6.html

161

☆ホームページ☆

● ブラウザで閲覧する

162

基本１８-7

< >table< >< 数値 >セル< >< >tr td colspan=" " /td /tr< >/table

でセルの列を結合する

セルの列数が の場合"3"作業終了後［table7 ]で保存.html

基本１８ｰ でセルの横の結合を試みましたが、6ここでは結合するセルの数を３列にします。

●メモ帳で入力

< >html< >head< >表をつくる－セルの列を結合 < >title =2= /title< >/head< >body< >table border="2"< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >文学部< >< >< >td /td /tr /tr< >< >教育学部< >< >文学部< >< >< >tr td /td td /td /tr /tr< >< >人間文化学部< >< >文学部< >< >< >tr td /td td /td /tr /tr< >/table< >/body< >/html

● 保存

で保存する。table7.html

163

☆ホームページ☆

● ブラウザで閲覧する

164

基本１８-8………参考

< >table< >< 数値 >セル< >< >tr td rowspan=" " /td /tr< >/table

でセルの行を結合する

結合するセルを２つにする

作業終了後［table8 ]で保存.html

行数を結合したセルを、２カ所に増やします。

4参照：セルの行を結合する………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－セルの行を結合 < >title =2= /title< >/head< >body< >table border="2"< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >< >< >< >td rowspan="3" width="80" /td /tr /tr< >< >教育学部< >< >< >tr td /td /tr /tr< >< >人間文化学部< >< >< >tr td /td /tr /tr< >/table< >/body< >/html

● 保存

で保存する。table8.html

165

☆ホームページ☆

● ブラウザで閲覧する

166

基本１８-9

< >table< 色 >< 数値 色 >セル< >< >tr bgcolor=" " td rowspan=" " bgcolor=" " /td /tr< >/table

でセルの行及びセルに色をつける

色 は、１行すべてに色をつけるtr bgcolor=" "色 は、そのセルに色をつけるtd bgcolor=" "

作業終了後［table9 ]で保存.html

「 」は、セルの背景に色をつけるタグです。bgcolor< 色 >は、 に をつけますから、tr bgcolor=" " tr bgcolorその行１行全部に色指定をすることになります。

< 色 >は、 に をつけますから、td bgcolor=" " td bgcolorそのセルのみに色指定をすることになります。

色は、色名前またはカラーコードで指定します。

●メモ帳で入力

< >html< >head< >表をつくる－セルに色をつける< >title /title< >/head< >body< >table border="2"< >< >川村学園女子大学< >< >tr bgcolor="purple" td colspan="3" /td /tr< >< >学部名< >tr td align="right" valign="top" rowspan="3" width="80" bgcolor="olive" /tdtd bgcolor="green" /td td rowspan="3" width="80" bgcolor="red" /td /tr /tr< >文学部< >< >< >< ><

>

< >< >教育学部< >< >< >tr td bgcolor="yellow" /td /tr /tr< >< >人間文化学部< >< >< >tr td bgcolor="lime" /td /tr /tr< >/table< >/body< >/html

167

☆ホームページ☆

● 保存

で保存する。table9.html

● ブラウザで閲覧する

168

基本１８-10

< >table< >< >セル< >< >tr td /td /tr< >/table

で線のない表をつくる

数値 をつけないことで表の線を消去するborder=" "

作業終了後［table10. ]で保存html

表は、< 数値 >< >のタグで作成されました。table border=" " /tableここでの < >< >のタグは、線のない表をつくります。table /tableしたがって、文字列等の配置を指定するのに使われます。

また、< >とすることにより、線を消すことも可能です。table border="0"

1参照：表をつくる………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－線を消去< >title /title< >/head< >body< >table< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >< >< >< >td rowspan="3" width="80" /td /tr /tr< >< >教育学部< >< >< >tr td /td /tr /tr< >< >人間文化学部< >< >< >tr td /td /tr /tr< >/table< >/body< >/html

● 保存

で保存する。table10.html

169

☆ホームページ☆

● ブラウザで閲覧する

170

基本１８-11

< 色 >table bgcolor=" "< >< >セル< >< >tr td /td /tr< >/table

で表の背景に色をつける

色 は、色の名前またはカラーコードで指定するborder=" "

作業終了後［table11. ]で保存html

< 色 >は、 に色をつけました。tr bgcolor=" " tr< 色 >は、 に色をつけました。td bgcolor=" " tdここでは、

に色をつけます。table

9参照：セルに色をつける………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－表に色をつける< >title /title< >/head< >body< >table bgcolor="yellow"< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >< >< >< >td rowspan="3" width="80" /td /tr /tr< >< >教育学部< >< >< >tr td /td /tr /tr< >< >人間文化学部< >< >< >tr td /td /tr /tr< >/table< >/body< >/html

171

☆ホームページ☆

● 保存

で保存する。table11.html

● ブラウザで閲覧する

172

基本１８-12

< 位置 >table align=" "< >< >セル< >< >tr td /td /tr< >/table

で表の位置を指定する

作業終了後［table12. ]で保存html

< 位置 >< >のタグは、作成した表の位置を指定します。table align=" " /table左寄せは、 で、="left"中央は、 で、="center"左寄せは、 で、指定します。="right"無指定は、左寄せとなります。

3参照：セル中の文字の位置………基本１８ｰ

●メモ帳で入力

< >html< >head< >表をつくる－表の位置を指定< >title /title< >/head< >body< >table bgcolor="yellow" aign="center"< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >< >< >< >td rowspan="3" width="80" /td /tr /tr< >< >教育学部< >< >< >tr td /td /tr /tr< >< >人間文化学部< >< >< >tr td /td /tr /tr< >/table< >/body< >/html

● 保存

で保存する。table12.html

173

☆ホームページ☆

● ブラウザで閲覧する

174

基本１８-13

< 数値 数値 >table width=" " height=" "< >< >セル< >< >tr td /td /tr< >/table

で表の大きさを指定する

作業終了後［table12 ]で保存.html

<…… 数値 > は、表の横幅で、widht=" "「ピクセル」または「％」で指定します。

<…… 数値 > は、表の縦幅で、height=" "「ピクセル」で指定します。

●メモ帳で入力

< >html< >head< >表をつくる－表の大きさを指定< >title /title< >/head< >body< >table bgcolor="yellow" aign="center" width="400" height="200"< >< >川村学園女子大学< >< >tr td colspan="3" /td /tr< >< >学部名< >< >文学部< >tr td align="right" valign="top" rowspan="3" width="80" /td td /td< >< >< >< >td rowspan="3" width="80" /td /tr /tr< >< >教育学部< >< >< >tr td /td /tr /tr< >< >人間文化学部< >< >< >tr td /td /tr /tr< >/table< >/body< >/html

● 保存

で保存する。table13.html

175

☆ホームページ☆

● ブラウザで閲覧する