ホームページ練習部屋　〜初心者のためのＨＴＭＬ〜

第三回目
今回はテーブルタグを使ってページを整えます。

テーブルの基本

１．まず<table>〜</table>を作ります。
　この範囲内が１つのテーブルになります。
２．次にテーブルの中の行を作ります。
　<tr>〜</tr>
３．そして行の中にセルを作ります。
　<td></td>

１〜３をまとめると下記のようになります。
「１つのテーブル内の１つの行内の１つのセル」です。

<table><tr><td></td></tr></table>

これを「１つのテーブル内の２つの行内の２つのセル」にしたい場合は次になります。

<table>
<tr>
<td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

では、前回までのrensyu.htmlにテーブルを使ってみます。

<table>
<tr>
<td><h1>ホームページを一から練習</h1></td>
<td><h2>初心者ページ大公開！</h2></td>
</tr>
<tr>
<td><p>今日から初めてのホームページを作ります。 これからどんどん勉強して、Ｗｅｂ上でいろんなことを表現していきたいと思います。 さぁ、勉強！勉強！</p></td>
<td></td>
</tr>
</table>

この文だと２行目の２つ目のセルが不要なので、３つ目の<td>タグの中にcolspan="2"と書き込みます。
その時にtdとcolspanの間に半角スペースを入れてください。

こうなりましたか？

これでは、横にだらだっとした感じでまとまりが無いので、幅を決めて、変化がわかるように枠線を付けたいと思います。

<table>の中にwidth="800" border="1"と書き込みます。
最初のwidth="800"がテーブルの横幅、次のborder="1"が枠線、それぞれの中の数字が横幅と太さを表す数値です。

同じようにして、１行目の
１つ目の<td>の中にwidth="500"
２つ目の<td>の中にwidth="300"
２行目の
<td colspan="2">のなかにwidth="800"
を書き加えます。
そうすると

こうなるはず。

頭がこんがらかってきたので、今回はココまでにします。
次回はテーブル内の色とかをスタイルシー（ＣＳＳ）を使ってデザインします。