ホームページ作成・CSSの基本や、ロゴ作成、アフィリエイトなどについて説明しています。

基礎編

デザイン編
運営編
その他

テーブル

1.テーブルの基本タグ

テーブルは、全体の枠である<table>〜</table>タグの中に、行<tr>〜</tr>と 列<td>〜</td>を配置して作ります。
テーブルの中の個別のマスをセルといいます。

<table><tr><td>〜</td></tr></table>
また、テーブルに枠線を付けたいときは、
<table border>〜</table>
というように記述します。

以下のように記述すると、

<table border><tr><td>
今日</td><td>
いい天気</td></tr><tr><td>
明日</td><td>
雨</td></tr></table>
次のように表示されます。
今日 いい天気
明日

[ページTOPへ]

2.表の表示位置を指定する

表の表示位置を指定するには、以下のタグを用います。

<table align="@">〜</table>
*@=left,center,right
@の値設定次第で、左、中央、右のそれぞれの位置に表を表示させることが出来ます。

[ページTOPへ]

3.表の内容の表示位置を指定する

表内の一つの四角いスペースをセルと言いますが、そのセル内に設置する文字や画像の位置を指定します。

<td align="@">〜</td>
<td valign="A">〜</td>

*@=left,center,right
A=top,middle,bottom,baseline

[ページTOPへ]

4.表内に見出しを付ける

表内に見出しを付けるには、以下のタグを用います。

<th>〜</th>
このタグは、<TD>のある位置に設置し、その中の内容が太字になります。

以下のように記述すると、

<table border>
<tr><th>
今日</th><td>
いい天気</td></tr> <tr><th>
明日</th><td>
雨</td></tr>
</table>
次のように表示されます。

今日いい天気
明日

[ページTOPへ]

5.セルを結合する

セルを結合するには、colspanとrowspanを用います。

colspan

colspanを用いると、セルを横に結合することができます。

以下のように記述すると、

<table border>
<tr><td colspan="3">
飲み物</td></tr><tr><td>
コーヒー</td><td>
ココア</td><td>
麦茶</td></tr></table>

次のように表示されます。

飲み物
コーヒー ココア麦茶

rowspan

rowspanを用いると、セルを縦に結合することができます。

以下のように記述すると、

<table border>
<tr><td rowspan="3">
飲み物</td><td>
コーヒー</td></tr><tr><td>
ココア</td></tr><tr><td>
麦茶</td></tr>
</table>

次のように表示されます。

飲み物 コーヒー
ココア
麦茶
[ページTOPへ]

6.表の大きさを指定する

widthで横幅を、heightで縦幅を指定することができます。

<table width="@" height="A">〜</table>
@には横幅を入れます
Aには縦幅を入れます
[ページTOPへ]

7.枠線の太さを指定する

<table border="@">〜</table>
@には枠線の太さを入れます

例えば以下のように記述すると、

<table border="10"><tr><td>
これはテスト
</td></tr></table>

次のように表示されます。

これはテスト
[ページTOPへ]

8.セルの間隔と余白

セルの間隔

セルとセルの間の間隔を指定します。

<table cellspacing="@">〜</table>
@にはセルの間隔の幅を入れる

以下のように記述すると、

<table border cellspacing="10"><tr><td>
これはテスト</td><td>
これはテスト</td>
</tr></table>

次のように表示されます。

これはテストこれはテスト

セルの余白

文字などのセルの中身から、セルの枠線までの余白を指定します。
<table cellpadding="@">〜</table>
セルの余白の幅を入れる

以下のように記述すると、

<table border cellpadding="10"><tr><td>
これはテスト</td><td>
これはテスト</td>
</tr></table>

次のように表示されます。

これはテストこれはテスト
[ページTOPへ]

Copyright © 2008 ホームページ作成初心者講座 All Rights Reserved.
また、バナー以外の直リンクは禁止となっております。ご了承下さい。