テーブル（表）タグ。ＨＴＭＬ文章解説無料ホームページ作成は京都のリュウム

テーブル（表）タグ

<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など)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b3 ～
・BACKGROUND="背景画像のURL"
　「背景画像のURL」には、表全体の背景にタイル状に貼り込む画像のURLを指定します。画像には、GIF（アニメGIFも含む）・JPEG・プログレッシブJPEG・PNG(★4.04 ～)を指定することができます。

★4.0b3 ～
・BORDERCOLOR="外枠の色"
　表の「外枠の色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ２桁の16進数で表わした計６桁の値、または、色の名前(black、redなど)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b2 ～
・COLS="横方向のセル数"
　表の「横方向のセル数」を指定します。これを指定することで表の表示スピードがあがります。これと同時に各セルの幅（WIDTH）も指定するといっそう効果があるようです。

【使用例】

</TABLE>

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

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

</TABLE>

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

あ	い	う
え	お	か

画像と同様に
回り込みもできます。

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

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

</TABLE>

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

	空
で		す

	空
で		す

<< PAGE TOP >>

<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など)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b3 ～
・BACKGROUND="背景画像のURL"
　「背景画像のURL」には、表のその列全体の背景にタイル状に貼り込む画像のURLを指定します。画像には、GIF（アニメGIFも含む）・JPEG・プログレッシブJPEG・PNG(★4.04 ～)を指定することができます。

【使用例】

<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>

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

</TABLE>

あ	い	う
え	お	か

<< PAGE TOP >>

<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など)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b3 ～
・BACKGROUND="背景画像のURL"
　「背景画像のURL」には、そのセルの背景にタイル状に貼り込む画像のURLを指定します。画像には、GIF（アニメGIFも含む）・JPEG・プログレッシブJPEG・PNG(★4.04 ～)を指定することができます。

【使用例】

<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>

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

</TABLE>

あ	い	う
あ	え	お

</TABLE>

あ
い	う	え

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

</TABLE>

あ	い	う
え	お	か

<< PAGE TOP >>

<TH>　～　</TH>

【説　明】

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

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

<< PAGE TOP >>

<CAPTION>　～　</CAPTION>

【説　明】

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

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

【使用例】

</TABLE>

五十音
あ	い	う
え	お	か

</TABLE>

五十音
あ	い	う
え	お	か

<< PAGE TOP >>

独自ネットショップや楽天ショップ・YAHOOショップ運営される初心者の方も、無料で、親切にアドバイスいたします。
ＳＥＯ・月次更新・リニュアルetc

京都市中京区橋弁慶町222番地
ヒライビル3階

ＨＴＭＬ文章解説

ホームページ作成サポート

ホームページ制作のことなら、格安で成功するSEO対策に強い京都のホームページ作成リュウムへ

無料お見積はこちらから

TEL : 075-257-4588
京都市中京区橋弁慶町222番地ヒライビル3階

無料ホームページ作成講座|京都のホームページ制作会社リュウム