Tableタグを理解する

• サイト構成をイメージする
• 拡張子を理解する
• HTMLの基本構造
• Tableタグを理解する
• 画像を表示させる
• メニューとコンテンツの作成
• 見出しと段落
• リンクの設定
• スタイルシートを理解する
• IDとclassを理解する
• レイアウトを変える
• ドメインの取得
• ムームードメインの設定
• サーバーを選ぶ
• ロリポップの設定
• アップロードの仕方
• 掲示板・カウンタの設置

Tableタグを理解する

ここでは、テーブル（table）という表組タグを使って骨格を作っていこうと思います。tableタグは下のような一つのセットで構成されています。

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

<table></table>はテーブルというタグを使いますという知らせであり、<tr></tr>は行を表し、<td></td>は 列を表します。

<table> <tr> <td>タイトル</td> </tr> <tr> <td>メニュー</td> </tr> </table>

タイトル メニュー

tableタグにはborder（テーブル枠）、cellspacing（枠の二重線の間隔）、cellpadding（枠と文字の間隔）を指定することができます。

borderとcellspacingなど要素同士の間隔は「半角スペース」です。

下の例では、枠を1pxで、枠の二重線の間隔はゼロ、枠と文字の間隔が5pxと言うことになります。

<table border="1" cellspacing="0" cellpadding="5"> <tr> <td>タイトル</td> </tr> <tr> <td>メニュー</td> </tr> </table>

タイトル メニュー

また、tableのセルとセルはエクセルのように結合させることができます。

縦のセルを結合するときはrowspan、横のセルを結合するときはcolspanを使用します。

例えば、下の例を見て見ましょう

<table border="1" cellspacing="0" cellpadding="5"> <tr> <td colspan="2">タイトル</td> </tr> <tr> <td>メニュー1</td> <td>メニュー2</td> </tr> </table>

タイトル メニュー1 メニュー2

上段の二つのセルをcolspanを使って一つにまとめました。colspan="○"の○には結合したいセルの個数を入れます。

これで、あなたがイメージしたサイトの大まかな枠組みを作れると思います。 なお、最後にborder枠は消すので見掛けは表組みのようには見えません。