表(テーブル)の作成

表(テーブル)は、単に表組みをするだけでなく
HPのレイアウトをイメージアップしてくれます。

テーブルを組めるようになると、HP作りはほとんど完成!

・・・テーブルのタグ・・・

<table>・・・</table>テーブルの外枠を組む
<tr>・・・</tr>「行の始まり」・・・「行の終り」
<td>・・・</td>「セルの始まり」・・・「セルの終り」
<th>・・・</th>セルを見出しに使うときに、
<td>・・・</td> の代わりに使う
見出し語が中央揃えの太字になる

・・・テーブルに罫線をつける属性・・・

border罫線を表示させる
border="・・・"""内の数字で罫線の太さを指定
borderなしのときは、border=0 と同じ
border は、border=1 と同じ
 

・・・実験してみましょう・・・

自分のHPのソースのどこかにつぎのように書き入れてください。

わかりやすいように改行して書いておきました
No. 16
<table border>

<tr><th>季節\季語</th><th>植物</th><th>動物</th><th>風習</th></tr>

<tr><td>春</td><td>フキノトウ</td><td>白魚</td><td>潮干狩り</td></tr>

<tr><td>夏</td><td>卯の花</td><td>雷鳥</td><td>日傘</td></tr>

<tr><td>秋</td><td>芙蓉</td><td>秋刀魚</td><td>稲刈り</td></tr>

<tr><td>冬</td><td>山茶花</td><td>フクロウ</td><td>焚き火</td></tr>

</table>

更新手続きをしましょう
次のような表ができましたか?

季節\季語植物動物風習
フキノトウ白魚潮干狩り
卯の花雷鳥日傘
芙蓉秋刀魚稲刈り
山茶花フクロウ焚き火



・・・テーブルタグのその他の属性・・・

height="・・・"表の縦の長さを指定
width="・・・"表の横幅を指定
bgcolor="・・・"表の背景色を指定
align="・・・"ページ内での表の位置を指定
"・・・"部分に、center、left、rightを入れる
セル内を指定するときは、<td>・・・</td>の中に書く
background="・・・"表の背景にイメージを貼りこむ
cellpadding="・・・"表のセル内の、文字と罫線との間隔を指定
cellspacing="・・・"表の罫線の幅を指定
bordercolor="・・・"表の罫線の色を指定
 


・・・セル内を編集できる属性・・・

注:セル内を指定するときは、<tr>、<td>の中に書

bgcolor="・・・"背景色を指定
align="・・・""・・・"部分に、center、left、rightを入れる
background="・・・"背景にイメージを貼りこむ
(<td>のみ)
bordercolor="・・・"セルの罫線の色を指定
 


いろいろな属性を使って遊んでみましょう

No.16のソースに赤字を書き入れてみましょう
ここもわかりやすいように空行を入れておきました。
No.17
<table border align="center" cellpadding="10" cellspacing="5" bordercolor="pink">

<tr bgcolor="honeydew"><th>季節\季語</th><th>植物</th><th>動物</th><th>風習</th></tr>

<tr><td background="agra03.gif">春</td><td>フキノトウ</td><td>白魚</td><td>潮干狩り</td></tr>

<tr><td align="center"><font color="red"><b></b></font></td><td>卯の花</td><td>雷鳥</td><td bgcolor="white">日傘</td></tr>

<tr bordercolor="blue"><td align="right">秋</td><td><font color="hotpink"><b>芙蓉</b></font></td><td>秋刀魚</td><td>稲刈り</td></tr>

<tr align="center"><td><font size="+1" color="blue"><b></b></font></td><td>山茶花</td><td>フクロウ</td><td bordercolor="red">焚き火</td></tr>

</table>

更新手続きをしましょう
次のように編集できましたか?

季節\季語植物動物風習
フキノトウ白魚潮干狩り
卯の花雷鳥日傘
芙蓉秋刀魚稲刈り
山茶花フクロウ焚き火



・・・テーブルの応用・・・

テーブルは単に表を作るだけでなく
ページのレイアウトに応用できます。

今のページは全体を中央揃えにしないと、
コンテンツが左や右に寄ってしまい、見栄えが悪いですね。
No.15のようになります。

ページ全体をひとつの表とみなして、
幅を決め、中央揃えにすると

体裁のよいページになります。

また、画像と文字をバランスよく配置したり、
箇条書きを体裁よく作ったりできます。

セルの中は、自在に編集できます。
文字の編集、画像の貼り付け、色付け、リンク、改行、
セルの中に、別のテーブルを組むこともできます。

今まで習ったことをほとんど全部利用することができます。

このように、テーブルはさまざまな利用法があるのです。
テーブルを使ってないページはないといっていいでしょう!




複雑なテーブルのサンプルを追加しました



次回はテーブルの変形です!



制作者のHPかぼちゃの旅