POPFAM.JPテーブルHTMLタグの色々

表紙に戻る

テーブル（表）ＨＴＭＬについて

テーブルとセルの関係

←セル枠　　　　セル内

テーブル枠線↓

枠線幅：border="3"　bgcolor="#ff0000"

＜概　要＞
　　　　<TABLE>
　　　　　　<TBODY>
　　　　　　<TR>
　　　　　　<TD>～～～～～</TD>
　　　　　　</TR>
　　　　　　</TBODY>
　　　　 </TABLE>

<TABLE>～</TABLE>
テーブルタグになります

<TＲ>～</TＲ>
テーブル内のセルタグになります

テーブルタグ　サンプルタグ1
table　または　TABLE

テーブル内タグ　サンプルタグ2
td　または　ＴＤ

サンプルのタグ１　を参照

<TABLE width="横幅" height="高さ" border="枠線太さ">
<TBODY>
<TR><TD>テーブルタグ　サンプル</TD></TR>
</TBODY>
</TABLE>

サンプルのタグ２　を参照（こちらでは概要の青字＜TD＞を指定します）

<TABLE width="横幅">
<TBODY>
<TR><TD width="セルの横幅" height="セルの高さ" style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;">テーブルタグ　サンプルタグ2</TD></TR>
</TBODY>
</TABLE>

セル　（ＴＤ）

テーブル内のスペースのことを
【セル】と呼びます

width=** 横幅（数値；ピクセル）　　height=** 縦幅（数値；ピクセル）
上記のタグは指定するときに使います。
省略が可能ですが、指定無しの場合は、自動調整となってしまいますので、指定することをオススメします
指定する場合（width="80"）

ポップファムをよろしくお願いします

指定しない場合

ポップファムをよろしくお願いします

上記のように長い文章の場合広がってしまいます
border=*　　オブジェクト周囲の囲い枠　[ 0 ]なら枠はありません
[　" ]の記号は省略可能です

テーブル内（TABLE)行列（ＴＤ）タグの追加

セル1

セル２

セル1

セル３

セル1(198px)	セル2(198px)
セル3(198px)	セル4(198px)

<TABLE width="横幅" height="高さ" border="枠線太さ">　←横幅、高さは省略可能です
<TBODY>
<TR><TD width="198">セル1</TD><TD width="198">セル2</TD></TR>
<TR><TD width="198">セル3</TD><TD width="198">セル4</TD></TR>
</TBODY>
</TABLE>

横幅（width）の数値指定する場合
セルの横幅＋テーブル枠幅となります

テーブル、セルに色をつける

セル1

セル２

セル1

セル２

テーブルの色

<TABLE width="400" height="20" border="1">
<TBODY>
<TR><TD bgcolor="#ff0000"><FONT color="#ffffff">テーブルの色</FONT></TD></TR>
</TBODY>
</TABLE>

テーブルの色

<TABLE width="400" height="20" border="0">
<TBODY>
<TR><TD bgcolor="#ff0000"><FONT color="#ffffff">テーブルの色</FONT></TD></TR>
</TBODY>
</TABLE>

複数のセルの色を変える

セル１	セル２
セル３	セル４

*青字の部分は、
セルのカラーになります

テーブルの中にテーブルを入れることも可能です

ボーダーの種類（border）

点線ＨＴＭＬ　dotted

タグは下記のようになります。
<TABLE style="border-width : 3px 3px 3px 3px;border-style : dotted dotted dotted dotted;" width="200">
<TBODY>
<TR>
<TD>点線</TD>
</TR>
</TBODY>
</TABLE>
・・・dotted＝点線タグ

このタグを応用してみましょう

実線ＨＴＭＬ　solid

・・・solid （線幅；３px）

くぼみＨＴＭＬ　groove

・・・groove （線幅；５px）

浮き出しＨＴＭＬ　ridge

・・・ridge （線幅；５px）

二重線ＨＴＭＬ　double

・・・double　（線幅；５px）

その他
インセット・・・inset
アウトライン・・outset
四辺とも同じ線種、幅でのタグです

このようにも出来ます

タグはこのようになります
<TABLE style="border-width : 1px 8px 3px 5px;border-style : solid solid solid solid;" width="200">
<TBODY>
<TR>
<TD align="center"><FONT size="2"><B>このようにも出来ます</B></FONT></TD>
</TR>
</TBODY>
</TABLE>

1px（上;top）　8px（右;right）　3px（下;bottom）　5px（左;left）となります
（数値は自由に指定できます）

こちらは基本的なテーブルの概要です、あとは、応用していくしかありません。

セル内に画像（背景）を指定

上記のような画像をセルの背景に指定してみましょう

POPFAM

<TABLE width=** height=** border=1>
<TBODY>
<TR><TD width=** height=** background=画像URL>▼▼▼</TD></TR>
</TBODY>
</TABLE>
▼の部分に文字を入れます

背景に画像を入れる場合と入れない場合の違い
画像を入れてしまうとテキスト（文字）は挿入できませんが、セル背景に画像を入れることによりテキストはいつでも入れ変える事ができるというわけです

ヒント1
テーブル枠の中にイメージ画像や動く文字タグなどを入れることもできます
ヒント2
いくつかのセルを作ったテーブルでは編集が楽になります
ヒント3
テーブル内を指定し、スクリプトなども入れると動きのある部分を作成できます