がっちゃんのProject-Q

セルの属性

プロパティ	値	解説
bgcolor	カラー 指定	セル内の背景色を指定します
background	画像のアドレス	セル内の背景画像を指定します
width	数値	セルの幅を指定します
height	数値	セルの高さを指定します
rowspan	縦に連結するセルの数	セルを縦に連結します
colspan	横に連結するセルの数	セルを横に連結します

大魔神塾のタグを全て半角表示にしました！（そのままコピペOK）

セルの属性 bgcolor 　　　　<td bgcolor=" カラー " >

セルの 背景色 を指定できます。

yellow	greem	pink
red	blue	skyblue

<table border="1"><tr><td bgcolor="yellow" >yellow</td><td bgcolor="green" >greem</td><td bgcolor="pink" >pink</td></tr>
<tr><td bgcolor="red" >red</td><td bgcolor="blue" >blue</td><td bgcolor="skyblue" >skyblue</td></tr></table>

セルの属性 background 　　　　<td background=" 画像のアドレス " >

セルの 背景画像 を指定できます。

1	2
3	4

セルごとに異なる背景画像を入れてみました。

判りやすい様にセルの大きさを変更してます。
どうやるかって？
セルのサイズ指定はこのあとでお勉強～

それよりもここで考えて欲しいのだ。
1や2なども代わりに、 <img src="画像のアドレス"> でもこの様に表示できます。
画像だけを表にするのであれば、それで充分ですね。
このタグは画像の上にテキストを入れたり、背景画像の上に更に画像も入れられます。

そう、欲張りな方に最適？なタグですね。
テキストや画像を上に載せると、次の様な表の出来上がりです。





まずは画像を載せてみました。
画像の表示位置は、<td align="center" valign="middle" background="画像のアドレス">と、
位置の指定タグで真中にしてあります。（後で解説します）

<table border="1">
<tr><td width="100" height="100" align="center" valign="middle" background="1の背景画像アドレス" >
<IMG SRC="1に載せる画像アドレス"></td>
<td width="100" height="100" align="center" valign="middle" background="2の背景画像アドレス">
<IMG SRC="2に載せる画像アドレス"></td></tr>
<tr><td width="100" height="100" align="center" valign="middle" background="3の背景画像アドレス">
<IMG SRC="3に載せる画像アドレス"></td>
<td width="100" height="100" align="center" valign="middle" background="4の背景画像アドレス">
<IMG SRC="4に載せる画像アドレス"></td></tr></table>

もしもし亀よ亀さんよ～	世界の内でお前ほど～
歩みのノロイ者は無い～	どうしてそんなにノロイのか～

お次はテキストを載せてみました。
上のタグの<img src="○に乗せる画像のアドレス">の代わりに、
テキストを入力するだけです。

ここでもセルのサイズを指定してますが、では指定しないとどうなるのか・・

もしもし亀よ亀さんよ～	世界の内でお前ほど～
歩みのノロイ者は無い～	どうしてそんなにノロイのか～

ハイ、自動で横に広がっていきますね。
セルごとに、 width="○○" height="△△" でサイズを指定すれば、
セルのサイズが変わること無く表示できます。
上のタグの赤い部分ですね、（tdの後に属性を付けているのに注目です）

セル内の表示位置についての解説

align="left"	align="center"	align="right"
valign="top"	valign="middle"	valign="bottom"

align は横方向、 valign は縦方向

左／上＝<td align="left" valign="top">
左／中央＝<td align="left" valign="middle">
左／下＝<td align="left" valign="bottom">

中央／上＝<td align="center" valign="top">
中央／中央＝<td align="center" valign="middle">
中央／下＝<td align="center" valign="bottom">

右／上＝<td align="right" valign="top">
右／中央＝<td align="right" valign="middle">
右／下＝<td align="right" valign="bottom">

セルの属性 rowspan　（縦） 　　　　<td rowspan=" 連結するセル数 " >

セルを 縦に連結 できます。

<table border="1">
<tr><td rowspan="3" > 縦に３個連結 </td><td> １列目のＢ </td><td> １列目のＣ </td></tr>
<tr><td> ２列目のＢ </td><td> ２列目のＣ </td></tr>
<tr><td> ３列目のＢ </td><td> ３列目のＣ </td></tr></table>

本来「Ａ」のセルを縦に連結しました。
表とタグを見れば判りますが、 ２列目と３列目のセルは<td></td>の２セット作ればいいのです。
（１列目のＡで連結して、２列目と３列目のセルは作ってあるので）
上から ３・２・２ の合計７項目と考えてくださいね。


<table border="1">
<tr><td> １列目のＡ </td><td rowspan="2" > 縦２個を連結 </td><td> １列目のＣ </td></tr>
<tr><td> ２列目のＡ </td><td> ２列目のＣ </td></tr>
<tr><td> ３列目のＡ /td><td> ３列目のＢ </td><td> ３列目のＣ </td></tr></table>


同じように上から ３・２・３ の合計８項目と考えてください。

セルの属性 colspan　（横） 　　　　<td colspan=" 連結するセル数 " >

セルを 横に連結 できます。

<table border="1">
<tr><td colspan="3" > 横に３個連結 </td></tr>
<tr><td> ２列目のＡ </td><td> ２列目のＢ </td><td> ２列目のＣ </td></tr>
<tr><td> ３列目のＡ </td><td> ３列目のＢ </td><td> ３列目のＣ </td></tr></table>


上の表との違いは、連結したセル内のテキスト表示ですね。
< td colspan="3">を< th colspan="3">に換えました。
「見出し」でやりましたね？

楽しくなってきましたね～？