Tableタグを理解する

Tableタグを理解する
HPの作り方(簡単HP作成法)

HPの作り方TOP >Tableタグを理解する

関連リンク

スポンサードリンク

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枠は消すので見掛けは表組みのようには見えません。

Copyright @2007 nkdesk all right reserved.