HTMLタグ・リファレンス

テーブル

 

表（テーブル）の作成に関連するタグをいくつか紹介します。ホームページにおける表の機能は純粋に表を作成するというよりも、ページレイアウトの目的で使用されることのほうが多くなっています。複雑になりやすいのが欠点ですが、表を活用することによって非常に見栄えのよいホームページを作成することができます。

 
表の基本構成
 
枠線の表示
 
表の枠の設定
 
表の位置の設定
 
表の大きさの設定
 
表のタイトル
 
セル内のテキストの配置
 
表、行、セルに色をつける
 
表、セルの背景にイメージを表示する
 
セルの結合（行）
 
セルの結合（列）


■ 表の基本構成

TAG  
<TABLE><TR><TD>〜〜</TD></TR></TABLE>

Webブラウザで表を作成する場合、表内容を<TABLE></TABLE>で囲んで表を作ることを宣言する必要があります。<TR></TR>タグで横一行を定義し、一つ一つのセルを<TD></TD>で作成します。この作業を繰り返していくことによって任意の行列の表が作成できます。

SOURCE   

<TABLE>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

１ウィンドウズ
２マックOS
３ユニックス


■ 枠線の表示

TAG  
<TABLE BORDER="数値" BORDERCOLOR="色">〜〜</TABLE>

属性BORDERによって表に枠線をつけることができます。外枠線の太さはピクセル値で指定します。また、BORDERCOLORによって枠線の色を変更できます。色の指定は、カラーチャートを参照してください。

SOURCE   

<TABLE BORDER="5" BORDERCOLOR="red">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

１ウィンドウズ
２マックOS
３ユニックス


■ 表の枠の設定

TAG  
<TABLE CELLSPACING="数値" CELLPADDING="数値">〜〜</TABLE>

表にはBORDER属性によって枠線をつけることができました。この枠線は２本の線から構成されています。外側の枠線の太さはBORDER属性に任意のピクセル数を指定することによって変えることできました。この枠線に関してはさらに２つの属性、CELLSPACINGとCELLPADDINGがあります。
属性CELLSPACINGは枠線の２本の線の間隔、つまり枠線のそのものの太さを指定します。何も指定しない場合は、「２」が設定されます。
属性CELLPADDINGは内側の枠線と表中のテキストとの間隔を指定します。何も指定しない場合は、「１」が設定されます。

SOURCE   

<TABLE BORDER="1">
<CAPTION>BORDERのみの場合</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1" CELLSPACING="5">
<CAPTION>CELLSPACINGを設定した場合</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1" CELLPADDING="5">
<CAPTION>CELLPADDINGを設定した場合</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

BORDERのみの場合
１ウィンドウズ
２マックOS
３ユニックス

CELLSPACINGを設定した場合
１ウィンドウズ
２マックOS
３ユニックス

CELLPADDINGを設定した場合
１ウィンドウズ
２マックOS
３ユニックス


■ 表の位置の設定

TAG  
<TABLE ALIGN="位置">〜〜</TABLE>
位置は「left」、「center」、「right」が指定可能。

段落タグ<P></P>や画像タグ<IMG></IMG>と同様に、表もページ内での位置をALIGN属性によって指定できます。位置は「left」、「center」、「right」の３つが指定できます。何も指定しなければ自動的に「left」に設定されます。

SOURCE   

<TABLE BORDER="1">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1" ALIGN="right">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY こちらを参照。


■ 表の大きさの設定

TAG  
<TABLE WIDTH="数値" HEIGHT="数値">〜〜</TABLE>
数値はピクセル数か、ウィンドウ枠に対する％で指定します。

属性WIDTHとHEIGHTによって表の幅と高さを設定できます。数値はピクセル数か、ウィンドウ枠に対する％で指定します。

SOURCE   

<TABLE BORDER="1" WIDTH="200" HEIGHT="100">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1" WIDTH="30%" HEIGHT="20%">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY こちらを参照。

ウィンドウ枠の大きさを変えた場合、下の表の大きさが変化することを確認して下さい。


■ 表のタイトル

TAG  
<CAPTION>〜〜</CAPTION>
<CAPTION ALIGN="位置">〜〜</CAPTION>
位置には「top」か「bottom」を指定します。

表にタイトルをつける場合はCAPTIONタグを使用します。タイトルの位置は属性ALIGNによって変更できます。表の上部にタイトルをつけたい場合は「top」、下部につけたい場合は「bottom」を指定します。何も指定しない場合は上部につきます。

SOURCE   

<TABLE BORDER="1">
<CAPTION>代表的なOS</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1">
<CAPTION ALIGN="bottom">代表的なOS</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

代表的なOS
１ウィンドウズ
２マックOS
３ユニックス

代表的なOS
１ウィンドウズ
２マックOS
３ユニックス


■ セル内のテキストの配置

TAG  
<TD ALIGN="横位置" VALIGN="縦位置">〜〜</TD>
<TR ALIGN="横位置" VALIGN="縦位置">〜〜</TR>
横位置は「left」、「center」、「right」で、縦位置は「top」、「middle」、「bottom」で指定します。何も指定しない場合、ALIGNは「left」に、VALIGNは「middle」に設定されます。

セル内のテキストの配置をALIGNとVALIGN属性で指定できます。<TR>〜〜</TR>
タグで指定すると、その行のすべてのセルに対して有効になります。

SOURCE   

<TABLE BORDER="1" WIDTH="300" HEIGHT="250">
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD ALIGN="right" VALIGN="top">２</TD>
<TD ALIGN="right" VALIGN="top">マックOS</TD></TR>
<TR ALIGN="center" VALIGN="bottom"><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

１ウィンドウズ
２ マックOS
３ユニックス


■ 表、行、セルに色をつける

TAG  
<TABLE BGCOLOR="色">〜〜</TABLE>
<TR BGCOLOR="色">〜〜</TR>
<TD BGCOLOR="色">〜〜</TD>

BGCOLOR属性によって表全体に背景色を指定することができます。また、行、セルごとに指定することもできます。色の指定は、カラーチャートを参照してください。

SOURCE   

<TABLE BORDER="1" BGCOLOR="#FFFF00">
<CAPTION>表全体</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1">
<CAPTION>行</CAPTION>
<TR BGCOLOR="yellow"><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR BGCOLOR="fuchsia"><TD>２</TD><TD>マックOS</TD></TR>
<TR BGCOLOR="red"><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1">
<CAPTION>セル</CAPTION>
<TR><TD>１</TD><TD BGCOLOR="yellow">ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD BGCOLOR="fuchsia">マックOS</TD></TR>
<TR><TD>３</TD><TD BGCOLOR="red">ユニックス</TD></TR>
</TABLE>

DISPLAY  

表全体
１ウィンドウズ
２マックOS
３ユニックス

行
１ウィンドウズ
２マックOS
３ユニックス

セル
１ウィンドウズ
２マックOS
３ユニックス


■ 表、セルの背景にイメージを表示する

TAG  
<TABLE BACKGROUND="ファイル名">〜〜</TABLE>
<TD BACKGROUND="ファイル名">〜〜</TD>

BACKGROUND属性によって表全体もしくはセルの背景にイメージを表示させることができます。

SOURCE   

<TABLE BORDER="1" BACKGROUND="backcheck.gif">
<CAPTION>表全体</CAPTION>
<TR><TD>１</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>
<BR>
<TABLE BORDER="1">
<CAPTION>セル</CAPTION>
<TR><TD>１</TD><TD BACKGROUND="backcheck.gif">ウィンドウズ</TD></TR>
<TR><TD>２</TD><TD>マックOS</TD></TR>
<TR><TD>３</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

表全体
１ウィンドウズ
２マックOS
３ユニックス

セル
１ウィンドウズ
２マックOS
３ユニックス


■ セルの結合（行）

TAG  
<TD ROWSPAN="行数">〜〜</TD>

ROWSPAN属性を使用することによって、複数の行にまたがるセルを作ることができます。

SOURCE   

<TABLE BORDER="1">
<TR><TD ROWSPAN="3">代表的なOS</TD><TD>ウィンドウズ</TD></TR>
<TR><TD>マックOS</TD></TR>
<TR><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

代表的なOSウィンドウズ
マックOS
ユニックス


■ セルの結合（列）

TAG  
<TD COLSPAN="行数">〜〜</TD>

COLSPAN属性を使用することによって、複数の列にまたがるセルを作ることができます。

SOURCE   

<TABLE BORDER="1">
<TR><TD COLSPAN="3">代表的なOS</TD></TR>
<TR><TD>ウィンドウズ</TD><TD>マックOS</TD><TD>ユニックス</TD></TR>
</TABLE>

DISPLAY  

代表的なOS
ウィンドウズマックOSユニックス
 
 
ページ先頭へ    ホームページ作成Tipsへ    トップページへ