前のページに戻る

HTML入門の表紙へ

次のページへ


3. テーブルの上で

〜 表組みタグ 〜


3-1. テーブルのきほん型

<TABLE>タグを使って表(テーブル)を作ることができます。

テーブルは次のように書きます。

使用例 <TABLE BORDER=1>

  <TR> <TH>見出し1 <TH>見出し2 <TH>見出し3
  <TR> <TD>データ1 <TD>データ2 <TD>データ3
  <TR> <TD>データ4 <TD>データ5 <TD>データ6

</TABLE>

表示
見出し1 見出し2 見出し3
データ1 データ2 データ3
データ4 データ5 データ6



それぞれのタグの意味は次のようになっています。

タグ 意味
<TABLE>
  ・
  ・
</TABLE>
テーブル本体の範囲を示します
<TR> 行の始まりを示します
<TH> または <TD> テーブルの各データを示します。

<TH>は見出し用ですので太字でセンタリングされます。



3-2. <TABLE>のオプション指定

テーブル全体のオプションを<TABLE>タグの中で指定することができます。

オプションには、次のようなものがあります。

オプション 説明
BORDER=ピクセル数 外枠の太さ
WIDTH=ピクセル数または% テーブルの横幅
HEIGHT=ピクセル数または% テーブルの縦幅
CELLSPACING=ピクセル数 枠の太さ
CELLPADDING=ピクセル数 枠とデータのすきま


[使用例はここ]


3-3. データの表示位置の指定

データの表示位置は、<TR> <TH> <TD> の中で、

<TD ALIGN="center">

というように指定します。<TR>の中で指定するとその行全体のデータについて指定できます。

横方向の指定: ALIGN= left / center / right
縦方向の指定: VALIGN= top / middle / bottom

 
ALIGN="left"
 
 
ALIGN="center"
 
 
ALIGN="right"
 
 
VALIGN="top"
 
ここ ここ ここ
 
VALIGN="middle"
 
ここ ここ ここ
 
VALIGN="bottom"
 
ここ ここ ここ


また <TH> と <TD> は、 WIDTHHEIGHT オプションで、横幅,縦幅をピクセル単位で指定できます。


3-4. データが縦や横にまたがるとき

となりのわくにデータがまたがるときには、<TH> または <TD> の中で、

横にまたがるとき: COLSPAN= またがるわくの数
縦にまたがるとき: ROWSPAN= またがるわくの数

を指定します。

使用例 <TABLE BORDER=1>
<TR> <TH COLSPAN=3>横にまたがったり
<TR> <TD>あさがお <TD>ひまわり <TD>らべんだー
</TABLE>
表示
横にまたがったり
あさがお ひまわり らべんだー

使用例 <TABLE BORDER=1>
<TR> <TH ROWSPAN=3>縦にまたがったり <TD>あさがお
<TR> <TD>ひまわり
<TR> <TD>らべんだー
</TABLE>
表示
縦にまたがったり あさがお
ひまわり
らべんだー



3-5. テーブルの背景色

<TABLE> <TR> <TH> <TD>BGCOLORを指定すれば、それぞれのデータに背景色を指定できます。

使用例 <TABLE BORDER=1 BGCOLOR="green">
<TR BGCOLOR="orange">
<TD>あさがお <TD>ひまわり <TD>らべんだー
<TR> <TD>まつ <TD BGCOLOR="yellow">たけ <TD>うめ
</TABLE>
表示
あさがお ひまわり らべんだー
まつ たけ うめ

※ ネットスケープ3.0以上またはインターネットエクスプローラの機能です。


3-6. 文章の回り込み

<TABLE>のなかでALIGNを指定すると文章を回り込ませることができます。

ALIGN="left" 表を左に配置し、文章を右に回り込ませます。
ALIGN="right" 表を右に配置し、文章を左に回り込ませます。

使用例 <TABLE BORDER=1 ALIGN="right">
<TR> <TD>あさがお <TD>ひまわり
<TR> <TD>まつ <TD>たけ
</TABLE>
表を右に、文章を左に回り込ませてみた例です。このように文章を回り込ませることができます。
表示
あさがお ひまわり
まつ たけ
表を右に、文章を左に回り込ませてみた例です。このように文章を回り込ませることができます。

テーブルタグは中級編の最大の難関ですので、すぐには理解できないかもしれません。使っていくうちにすこしづつ覚えていきましょう。

テーブルタグは表を書くだけではなく、文章や画像を思い通りにそろえたいときにも使われます。



前のページに戻る

HTML入門の表紙へ

次のページへ