CSS

テーブル(表)タグ

<TABLE> 〜 </TABLE>

【説 明】

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

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

※テーブルを含む外側の範囲で指定された文字のスタイルは、テーブル内の文字には反映されません。

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

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

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

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

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

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

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

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

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

★3.0b5 〜
・BGCOLOR="背景色"
 表全体の「背景色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ2桁の16進数で表わした計6桁の値、または、色の名前(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)の値をそれぞれ2桁の16進数で表わした計6桁の値、または、色の名前(black、redなど)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b2 〜
・COLS="横方向のセル数"

 表の「横方向のセル数」を指定します。これを指定することで表の表示スピードがあがります。これと同時に各セルの幅(WIDTH)も指定するといっそう効果があるようです。

【使用例】

<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 BORDER BACKGROUND="bluebg.gif" CELLPADDING=14>

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

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

</TABLE>


<TABLE BORDER=4 BORDERCOLOR="#FF0000">

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






<< PAGE TOP >>

<TR> 〜 </TR>

【説 明】

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

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

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

★3.0b5 〜
・BGCOLOR="背景色"

 その列の「背景色」を指定します。色の指定は、"#"の後にRGBのR(red)とG(green)とB(blue)の値をそれぞれ2桁の16進数で表わした計6桁の値、または、色の名前(black、redなど)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

★4.0b3 〜
・BACKGROUND="背景画像のURL"

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

【使用例】

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

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

<TABLE BORDER>

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

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

</TABLE>


<< PAGE TOP >>

<TD> 〜 </TD>

【説 明】

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

・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)の値をそれぞれ2桁の16進数で表わした計6桁の値、または、色の名前(black、redなど)で指定することができます。これについては「Super Color Chart」を利用すると簡単に指定する値を知ることができます。

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

【使用例】

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

行揃えを
変更します。
A B
「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>

 



<TABLE BORDER CELLPADDING=14>

<TR>
<TD BACKGROUND="bluebg.gif">あ</TD>
<TD>い</TD>
<TD BACKGROUND="bluebg.gif">う</TD>
</TR>

<TR>
<TD>え</TD>
<TD BACKGROUND="bluebg.gif">お</TD>
<TD>か</TD>
</TR>

</TABLE>


<< PAGE TOP >>

<TH> 〜 </TH>

【説 明】

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

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


<< PAGE TOP >>

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

五十音

<< PAGE TOP >>

<< PAGE TOP >>

BACK UP 初心者でホームページを考えてられてる方へ

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

ホームページ制作の事なら

何でもお問合せください。

お問合せフォームはこちらから

ホームページ作成は京都のリュウム株式会社

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

TEL 075-257-4588
営業時間 AM10:00-PM7:00


CSS

Ryuumu