　☆ Sanctuary ☆　　Smile for you

TABLEタグ（３）

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

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

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

● 表に罫線を引くには？

まず、TABLEタグ（２）のページで作成したものを振り返ってみましょう。

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

↓こんな感じでしたね。

ミャー子	なな

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

( ・o・)b どうでしょう！！これでも罫線を引いているように見えませんか？
それでは、もうちょっとわかりやすくしてみましょう！
・table 全体の幅を 400 に広げ、
・各列の幅は 200 にしてみましょう！！

<table bgcolor="green" border="0" 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">
<td width="200" ><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子"></td>
<td width="200" ><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな"></td>
</tr>
<tr bgcolor="white">
<td width="200" align="left">ミャー子がお散歩中。。</td>
<td width="200" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>

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

ミャー子	なな

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

( ・o・)b あれれ、写真が左に寄ってしまってますね。
それでは、・２行目を中央に寄せて、( align="center" )
・なおかつ２行目の、縦幅を 150 に広げて、 ( tr height="150" )
みましょう！！

<table bgcolor="green" border="0" 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="ミャー子"></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="なな"></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 は列と列の隙間の幅を表します。

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

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