テーブル（表）

表

HTML INDEX

●<TABLE>　〜　</TABLE>

【説　明】

テーブル（表）を作成する場合の基本となるタグで、これを使用することで表が作成できます。テーブルに関連するタグは、このタグの範囲内に記述します。このタグはネストすることが可能です。また、表の中に表示するものに関して特に制限はありません。画像やフォームなども表示させることができます。

<TR>〜</TR>タグで囲われた範囲が、表の横１列を表わします。その中で <TD>〜</TD> タグで囲われた範囲が、１つのセルになります。また、見出しを表わすために <TD>タグの変わりに <TH>〜</TH> タグを使用すると、太字で表示されます。

・BORDER
　これを指定すると、表の外枠が表示されます。

・BORDER="外枠の幅"
　「外枠の幅」には、表全体を囲う外枠の幅をピクセル単位で指定します。デフォルトは１です。

・CELLSPACING="枠の幅"
　「枠の幅」には、表自体の枠の幅をピクセル単位で指定します。デフォルトは２です。

・CELLPADDING="枠と文字の間隔"
　「枠と文字の間隔」には、枠と表中の文字との間隔をピクセル単位で指定します。デフォルトは１です。

・WIDTH="表の幅"
　「表の幅」は、ピクセル単位またはパーセントで指定できます。

・HEIGHT="表の高さ"
　「表の高さ」は、ピクセル単位またはパーセントで指定できます。

・ALIGN="位置"
　「位置」には、top・bottom・left・center・right が指定できます。画像と同様に文字を回り込ませることができます

・VSPACE="縦スペース"
　「縦スペース」には、回り込みテキストなどとの縦方向の間隔をピクセル数で指定します。

・HSPACE="横スペース"
　「横スペース」には、回り込みテキストなどとの横方向の間隔をピクセル数で指定します。

★3.0b5 〜
・BGCOLOR="背景色"
　表全体の「背景色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ２桁の16進数で表わした計６桁の値、または、色の名前(black、redなど)で指定することができます。これについては「スーパーカラーチャート」を利用すると簡単に指定する値を知ることができます。

【使用例】

<TABLE BORDER=5>

<TR>
<TD>
<IMG SRC="river.gif" WIDTH=63 HEIGHT=83>
</TD>
</TR>

</TABLE>


<TABLE BORDER>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE BORDER=10>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE BORDER CELLSPACING=10>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE BORDER CELLPADDING=10>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE BORDER WIDTH=50% HEIGHT=40>

<TR>
<TDvあ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE BORDER ALIGN="right">

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TRv

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

画像と同様に<BR>
回り込みもできます。<BR CLEAR="right">

あいう
えおか
画像と同様に
回り込みもできます。


<TABLE BORDER BGCOLOR="#00FF00">

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか


<TABLE CELLSPACING=20>

<TR>
<TD>このようにして、表の枠を表示させずに、段組みのようにすることもできます。
</TD>
<TD>このようにして、表の枠を表示させずに、段組みのようにすることもできます。
</TD>
</TR>

</TABLE>

このようにして、表の枠を表示させずに、段組みのようにすることもできます。 このようにして、表の枠を表示させずに、段組みのようにすることもできます。


<TABLE BORDER ALIGN="left" CELLPADDING=6>
<TR>
<TD></TD>　<TD>空</TD>　<TD></TD>
</TR>
<TR>
<TD>で</TD>　<TD></TD>　<TD>す</TD>
</TR>
</TABLE>

<TABLE BORDER ALIGN="right" CELLPADDING=6>
<TR>
<TD><BR></TD>　<TD>空</TD>　<TD><BR></TD>
</TR>
<TR>
<TD>で</TD>　<TD><BR></TD>　<TD>す</TD>
</TR>
</TABLE>

<BR CLEAR="all">

空
です

空
で
す


横　　列

HTML INDEX

●<TR>　〜　</TR>

【説　明】

<TABLE>〜</TABLE>タグの範囲内で、このタグで囲われた部分が表の横１列になります。

・ALIGN="行揃え"
　その列のセル内での行揃えを指定します。「行揃え」には、left・center・right が指定できます。

・VALIGN="位置"
　その列のセル内での縦方向の位置を指定します。「位置」には、top・middle・bottom・baseline が指定できます。デフォルトは middle です。

★3.0b5 〜
・BGCOLOR="背景色"
　その列の「背景色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ２桁の16進数で表わした計６桁の値、または、色の名前(black、redなど)で指定することができます。これについては「スーパーカラーチャート」を利用すると簡単に指定する値を知ることができます。

【使用例】

<TABLE BORDER>

<TR ALIGN="right">
<TD>行揃えを<BR>右にします。</TD>
<TD>A</TD>
<TD>B</TD>
</TR>

<TR VALIGN="bottom">
<TD>bottomは</TD>
<TD>下に<BR>表示<BR>します。</TD>
<TD>なるほど！</TD>
</TR>

</TABLE>

行揃えを
右にします。		AB
bottomは下に
表示
します。		なるほど！


<TABLE BORDER>

<TR BGCOLOR="blue">
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>

<TR BGCOLOR="#00FF00">
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

あいう
えおか

横列の各データ

HTML INDEX

●<TD>　〜　</TD>

【説　明】

<TABLE>〜</TABLE>タグの中の、表の横１列を表わす<TR>〜</TR>タグの範囲内で使用され、１つのセルを表わします。

・ALIGN="行揃え"
　そのセル内での行揃えを指定します。「行揃え」には、left・center・right が指定できます。

・VALIGN="位置"
　そのセル内での縦方向の位置を指定します。「位置」には、top・middle・bottom・baseline が指定できます。デフォルトは middle です。

・ROWSPAN="行数"
　複数の縦列にまたがるセルを作成します。「行数」には、またがる行数を指定します。

・COLSPAN="セル数"
　横方向に複数のセルにまたがるセルを作成します。「セル数」には、またがるセルの数を指定します。

・WIDTH="セルの幅"
　「セルの幅」は、ピクセル単位またはパーセントで指定できます。

・HEIGHT="セルの高さ"
　「セルの高さ」は、ピクセル単位またはパーセントで指定できます。

・NOWRAP"
　セル内のテキストが勝手に改行されないようにする指定です。

★3.0b5 〜
・BGCOLOR="背景色"
　そのセルの「背景色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ２桁の16進数で表わした計６桁の値、または、色の名前(black、redなど)で指定することができます。これについては「スーパーカラーチャート」を利用すると簡単に指定する値を知ることができます。

【使用例】

<TABLE BORDER>

<TR>
<TD>行揃えを<BR>変更します。</TD>
<TD ALIGN="right">A</TD>
<TD ALIGN="center">B</TD>
</TR>

<TR>
<TD VALIGN="top">「VALIGN」は</TD>
<TD>上下方向の<BR>位置<BR>です。</TD>
<TD VALIGN="bottom">なるほど！</TD>
</TR>

</TABLE>

行揃えを
変更します。		AB
「VALIGN」は上下方向の
位置
です。		なるほど！


<TABLE BORDER>

<TR>
<TD ROWSPAN=2>あ</TD>
<TD>い</TD>
<TD>う</TD>
</TR>

<TR>
<TD>え</TD>
<TD>お</TD>
</TR>

</TABLE>

あいう
えお


<TABLE BORDER>

<TR>
<TD COLSPAN=3>あ</TD>
</TR>

<TR>
<TD>い</TD>
<TD>う</TD>
<TD>え</TD>
</TR>

</TABLE>

あ
いうえ


<TABLE BORDER>

<TR>
<TD WIDTH=100 HEIGHT=40>あ</TD>
<TD>い</TD>
<TD WIDTH=50>う</TD>
</TR>

<TR>
<TD HEIGHT=30>え</TD>
<TD>お</TD>
<TD>か</TD>
</TR>

</TABLE>

あ い う
え お か


<TABLE BORDER CELLPADDING=10>

<TR>
<TD BGCOLOR="blue">あ</TD>
<TD>い</TD>
<TD BGCOLOR="blue">う</TD>
</TR>

<TR>
<TD>え</TD>
<TD BGCOLOR="red">お</TD>
<TD>か</TD>
</TR>

</TABLE>

あいう
えおか

項　目　名

HTML INDEX

●<TH>　〜　</TH>

【説　明】

<TABLE>〜</TABLE>タグの中の、表の横１列を表わす<TR>〜</TR>タグの範囲内で使用され、表の項目の見出しを表わします。

文字が太字で表示される点をのぞいて、<TD>〜</TD>タグと同様に使用できますので、そちらを参照してください。

キャプション（表題）

HTML INDEX

●<CAPTION>　〜　</CAPTION>

【説　明】

テーブル（表）の上下のいずれかにキャプション（表題）を付加します。表に対してセンタリングされて表示されます。

・ALIGN="位置"
　「位置」には、top・bottom のいずれかを指定できます。デフォルトは、「top」です。

【使用例】

<TABLE BORDER>

<CAPTION>五十音</CAPTION>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>
<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

五十音
あいう
えおか


<TABLE BORDER>

<CAPTION ALIGN="bottom">五十音</CAPTION>

<TR>
<TD>あ</TD>　<TD>い</TD>　<TD>う</TD>
</TR>
<TR>
<TD>え</TD>　<TD>お</TD>　<TD>か</TD>
</TR>

</TABLE>

五十音
あいう
えおか