がっちゃんのProject-Q

テーブルの復習

大魔神塾のタグを全て半角表示にしました！（そのままコピペOK）

テーブルの作成手順のおさらい

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

テーブルで普通に製作するとこうなりますね。ここから手を加えてレイアウトをおさらいします。

まずはテーブルサイズとセルサイズの割り当てから。 width（横）とheight（縦）を使いましょう。

表の横幅の指定には、ピクセルとパーセントの2種類が使われます。
ピクセル指定は表のサイズが固定されますが、パーセント指定は画面に対しての割合となります。

表の全体幅を550ピクレルで指定するとどうなるか？　<table border="1" width="550">

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

縦も追加してみますね。　<table border="1" width="550" height="150">

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

更にセルのサイズも指定してみます。

表の全体幅が550です、左側のセルを100、右側のセルを450にして合計550に合わせてみます。
セル内のwidth heightは1行目だけ入れれば2行目、3行目は省略しても大丈夫です。

<table border="1" width="550" height="150"><tr><td width="100">左側</td><td width="450">右側</td></tr>

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

次はセル内の間隔を調整です。 cellpaddingで枠との距離を離してみます。

<table border="1" width="550" height="150" cellpadding="10">
<tr><td width="100">左側</td><td width="450">右側</td></tr>

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

だいぶ見やすくなりましたね、あとは背景を入れたりしてお飾りしてみましょう。詳しい解説はこちら

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

更にリンクするようにしましょうか。

ペコちゃんHP	琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。
キョンママHP	東京の下町、柴又でキティちゃんをかき集めている。
マリリンHP	モンコウに病を持つ。

上のテーブルタグです。参考にしてください。

<table border="1" width="550" height="150" cellpadding="10" bordercolor="#FFC0CB">
<tr>
<td width="100" bgcolor="#E0FFFF"><a href="http://plaza.rakuten.co.jp/hal72/">ペコちゃんHP</a></td>
<td width="450" bgcolor="#FFE4E1">琵琶湖近辺に生息する貴婦人。愛犬と酒とヒカリモノをこよなく愛す。</td>
</tr>
<tr>
<td bgcolor="#E0FFFF"><a href="http://plaza.rakuten.co.jp/bettiykitty/">キョンママHP</a></td>
<td background="http://plaza.rakuten.co.jp/img/user/74/13/1397413/340.gif">東京の下町、柴又でキティちゃんをかき集めている。</td>
</tr>
<tr>
<td bgcolor="#E0FFFF"><a href="http://plaza.rakuten.co.jp/maririnm/">マリリンHP</a></td>
<td background="http://plaza.rakuten.co.jp/img/user/74/13/1397413/341.gif">モンコウに病を持つ。</td>
</tr>
</table>