　☆ Sanctuary ☆　　Smile for you

TABLEタグ（４）

||　フリーページ一覧表へ戻る　||　ＴＡＢＬＥタグ（３）へ　||　ＴＡＢＬＥタグ（５）へ　||

テーブルタグ　<table>　の使い方を覚えよう！！（４）

table タグはページの作成に欠かせないものです。
table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう。。

● 写真を縁取りするには？

今回は、少し高度なテクニックです。
まず、TABLEタグ（３）のページで作成したものを振り返ってみましょう。

↓こんな感じでしたね。

ミャー子	なな

ミャー子がお散歩中。。	ななが外で日向ぼっこしています。

( ・o・)b これを単に img タグの border 属性で縁取りしてみましょうか？
border="2" にしてみます。

<table bgcolor="green" border="0" cellspacing="1" width="400" style="font-size:10pt;color:blue;">
<tr bgcolor="white">
<th width="200" align="center">ミャー子</td>
<th width="200" align="center">なな</td>
</tr>
<tr bgcolor="white" height="150">
<td width="200" align="center"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子" border="2" ></td>
<td width="200" align="center"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな" border="2" ></td>
</tr>
<tr bgcolor="white">
<td width="200" align="left">ミャー子がお散歩中。。</td>
<td width="200" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>

↓こんな感じになります。

ミャー子	なな

ミャー子がお散歩中。。	ななが外で日向ぼっこしています。

( ・o・)b でも、でも、img タグの border 属性で縁取りしても黒にしかならないんです。
他の色にするには、どうしたらいいでしょう？
ここから少し高度な技になります、、が心配しないでね。d(^-^ )

写真全体を table タグで囲んでしまいます。
つまり、table の中で、table を使ってみるのです。

それでは、マゼンタ（ほとんど濃いピンク色 #FF00FF）で写真を縁取りしてみます。
ミャー子とななの写真をそれぞれ table タグで囲みます。
とにかく、下の HTML タグを見てください。

<table bgcolor="green" border="0" cellspacing="1" width="400" style="font-size:10pt;color:blue;">
<tr bgcolor="white">
<th width="200" align="center">ミャー子</td>
<th width="200" align="center">なな</td>
</tr>
<tr bgcolor="white" height="150">
<td width="200" align="center">

<table bgcolor="#FF00FF" border="0" cellspacing="1" cellpadding="2">
<tr><td bgcolor="#FFFFFF" align="center" valign="middle">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子" border="0" > </td>
</tr>
</table>

</td>
<td width="200" align="center">

<table bgcolor="#FF00FF" border="0" cellspacing="2" cellpadding="2">
<tr><td bgcolor="#FFFFFF" align="center" valign="middle">
<img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな" border="0" > </td>
</tr>
</table>

</td>
</tr>
<tr bgcolor="white">
<td width="200" align="left">ミャー子がお散歩中。。</td>
<td width="200" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>

↓こんな感じになります。

ミャー子

なな

ミャー子がお散歩中。。

ななが外で日向ぼっこして
います。

( ・o・)b ミャー子の写真は細めに、ななの写真は少し太めにしてみました。
この違いはどこのあるのかと言うと、
table タグの cellspacing="1" と cellspacing="2" の違いです。

cellpadding="2" は写真とマゼンタの色との隙間の微妙な余白を意味しています。

ここで、大事なことは、img タグで border="0" にしておかなくてはいけません。

また、列を示す td タグの bgcolor="#FFFFFF" は白のことです。これは余白の部分の色になります。
また、align="center" は写真の横位置を中央に、
また、valign="middle" は写真の縦位置を中央に、指定しています。

どうだったでしょうか？( ･_･)? うん？ちょっと難しかったかな？
でも、このＨＴＭＬをそのまま、真似して使って見てください。
それで、( ^-^)v ＯＫ！です。

それでは、く(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪

っていうか、、もっと簡単にできます！！

● 写真を縁取りするには？その２

実は上の縁取りはもっと簡単にできます。
style 属性の border-color と padding を使ってみましょう！！
上のとまったく同じにしてみます。
ミャー子：枠色マゼンタ(border-color:#FF00FF)、枠線1(border="1")、枠線と画像の隙間2px(padding:2px)
なな　　：枠色マゼンタ(border-color:#FF00FF)、枠線2(border="2")、枠線と画像の隙間2px(padding:2px)

<table bgcolor="green" border="0" cellspacing="1" width="400" style="font-size:10pt;color:blue;">
<tr bgcolor="white">
<th width="200" align="center">ミャー子</td>
<th width="200" align="center">なな</td>
</tr>
<tr bgcolor="white" height="150">
<td width="200" align="center"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子" border="1" style="border-color:#FF00FF;padding:2px;" ></td>
<td width="200" align="center"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな" border="2" style="border-color:#FF00FF;padding:2px;" ></td>
</tr>
<tr bgcolor="white">
<td width="200" align="left">ミャー子がお散歩中。。</td>
<td width="200" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>

↓こんな感じになります。