<表を作ろう>

 まず、下の表を見て下さい。
TURQUOISE NAVI PLUM LIME LEMONCHIFFON
BISQUE DEEPPINK SLATEBLUE PALEGREEN INDIGO
LIGHTSLATEGRAY WHITESMOKE PALEGOLDENROD HOTPINK LAVENDER
MAGENTA MEDIUMSEAGREEN POWDERBLUE DARKSLATEGRAY GOLD
BRASS TOMATO SILVER LIGHTSKYBLUE FORESTGREEN

 これは、HTMLの記述で使用できる色名と実際の色を一部表にしたものですが、このような表もタグを使うだけで簡単に作る事が出来ます。
 このような表を作るために使うのは<TABLE>(テーブル)タグです。このタグは</TABLE>と合わせて2つ1組で使用します。また、<TABLE>だけですと表の線が透明になってしまいます。線をつける場合は、オプション「BORDER」を」つけます。

<TABLE>テーブルの中身</TABLE>
<TABLE BORDER>
テーブルの中身</TABLE>

 さて、そのテーブルタグですが、通常は間にセル(マス目)を設定するタグを入れて使います。そのセルを設定するのは<TD>タグで</TD>と挟む事によって1つのセルとなります。また<TH></TH>タグをを使うと、そのタグで挟まれた文字はヘッダの設定となり、太字になります。

<TABLE BORDER>
<TD>1つめのセル</TD>
<TD>2つめのセル</TD>
<TD>3つめのセル</TD>
</TABLE>

 横方向に3つのセルが表示されましたね。しかし、このまま<TD>タグで記述していっても、どんどん横に伸びて行くばかりです。そこで、今度は<TR>というタグを使って次のように行を設定してみましょう。

<TABLE BORDER>
<TR>
<TD>1行目の1つめのセル</TD>
<TD>1行目の2つめのセル</TD>
<TD>1行目の3つめのセル</TD>
</TR>
<TR>
<TD>2行目の1つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の3つめのセル</TD>
</TR>
</TABLE>

 この様に<TD>タグで設定したセルを<TR>タグで挟むことにより、表の行を指定する事が出来ます。これで何行・何列の表でも作る事が出来ます。次に下のような表の作り方を説明します。

色の見本
(RGB)

#FF0000 #00FF00 #0000FF #FFFF00
#FF00FF #00FFFF #FFFFFF #000000

   

色の見本(RGB)

#FF0000 #00FF00 #0000FF #FFFF00
#FF00FF #00FFFF #FFFFFF #000000

  

 上記の表は、見ての通りセルの一部がつながっています。このようにセルを結合するには次のような記述をします。

(上の表)

(下の表)

<TABLE BORDER>
<TR>
<TH ROWSPAN="2">つながったセル</TH>
<TD>1行目の1つめのセル</TD>
<TD>1行目の2つめのセル</TD>
<TD>1行目の3つめのセル</TD>
<TD>1行目の4つめのセル</TD>
</TR>
<TR>
<TD>2行目の1つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の3つめのセル</TD>
<TD>2行目の4つめのセル</TD>
</TR>
</TABLE>
<TABLE BORDER>
<TR>
<TH COLSPAN="4">つながったセル</TH>
</TR>
<TR>
<TD>2行目の1つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の2つめのセル</TD>
</TR>
<TR>
<TD>3行目の1つめのセル</TD>
<TD>3行目の2つめのセル</TD>
<TD>3行目の3つめのセル</TD>
<TD>3行目の4つめのセル</TD>
</TR>
</TABLE>

 「ROWSPAN」「COLSPAN」の設定はそれぞれ結合させるセルの数を記述します。2つめの表では1行目は4つのセルを結合させていますが、間の2つのセルだけ結合させるには次のように記述します。

<TABLE BORDER>
<TR>
<TH>1行目1つめの見だしセル</TH>
<TH COLSPAN="2">つながった見だしセル</TH>
<TH>1行目3つめの見だしセル</TH>
</TR>
<TR>
<TD>2行目の1つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の2つめのセル</TD>
<TD>2行目の2つめのセル</TD>
</TR>
<TR>
<TD>3行目の1つめのセル</TD>
<TD>3行目の2つめのセル</TD>
<TD>3行目の3つめのセル</TD>
<TD>3行目の4つめのセル</TD>
</TR>
</TABLE> 

 <TD>と<TH>タグには、他に「ALIGN」,「VALIGN」,「BGCOLOR」,「BACKGROUND」,「NOWRAP」オプションがあります。
「ALIGN」はセル内の横方向の位置指定、「VALIGN」はセル内の縦方向の位置指定を記述します。
「BGCOLOR」はセルの背景色指定、「BACKGROUND」はセルの背景画像の指定です。
セル内の文字列というのは、ブラウザ側で適当なところで改行されてしまう場合があるのですが、その改行を禁止するのが「NOWRAP」オプションです。指定の仕方は次の通りです。

ALIGN="LEFT,CENTER,RIGHT"・・・セル内の横方向[左寄せ,中央,右寄せ]
VALIGN="TOP,MIDDLE,BOTTOM"・・・セル内の縦方向[上寄せ,中央,下寄せ]
BGCOLOR=色指定・・・セルの色を指定[RGBまたは色名で指定]
BACKGROUND="画像ファイル名"・・・セルの背景画像を指定[URLを記述(Internet Explorer)
NOWRAP・・・セル内の文字列を改行しない。[これを記述するだけでOK]

 また、<TABLE>タグには次のようなオプションがあります。いろいろ試してどのような表示が出来るのか確認しましょう。オプション項目が多いので覚えるのは大変ですが、何回か作っていけば慣れてくると思います。

BORDER="ピクセル数"・・・表の外枠の太さを指定[指定しないときは"1"になります]
BORDERCOLOR=色指定・・・表の枠線の色を指定[RGBまたは色名で指定]
BORDERCOLORLIGHT=色指定・・・表の枠線の明色部を指定[RGBまたは色名で指定]
BORDERCOLORDARK=色指定・・・表の枠線の暗色部を指定[RGBまたは色名で指定]
ALIGN="LEFT,,RIGHT"・・・表の位置を指定して表の横に文字を表示出来る[左,右]
VSPACE="ピクセル数"・・・表の縦方向に余白を指定[上下に作る余白の幅]
HSPACE="ピクセル数"・・・表の横方向に余白を指定[左右に作る余白の幅]
WIDTH="ピクセル数,画面横幅に対する割合%"・・・表の横幅指定
HEIGHT="ピクセル数,画面縦幅に対する割合%"・・・表の縦幅指定
BGCOLOR=色指定・・・表の色を指定[RGBまたは色名で指定]
BACKGROUND="画像ファイル名"・・・表の背景画像を指定[URLを記述(Internet Explorer)
CELLSPACING="ピクセル数"・・・すべてのセルの枠線の太さ[指定しない時は"2"になります]
CELLPADDING="ピクセル数"・・・セルの枠線とその中の文字との間隔[指定しない時は"1"になります]
FRAME="BOX,BORDER,VOID,ABOVE,BELOW,HSIDE,LHS,RHS,VSIDES"
                                      ・・・外枠の表示形式
(Internet Explorer)
RULES="ALL,NONE,COLS,ROWS"・・・表罫線の表示形式(Internet Explorer)

 表の中には、文字だけでなく画像なども組み込む事が出来ますし、<TABLE>タグ(セル)の中に更に<TABLE>タグを記述して2重にする事も出来ます。
<TABLE>タグを工夫して使うだけでハイセンスな効果を演出する事も可能なのです。


メニュー / 基礎 / 文字 / 装飾 / 画像 / リンク / テーブル / フレーム / フォーム / ステップ