　☆ Sanctuary ☆　　Smile for you

TABLEタグ（２）

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

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

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

● セル内のフォントサイズやフォントカラーを一括指定するには？

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

<table bgcolor="lightblue" border="0" width="360">
<tr>
<th width="180" bgcolor="yellow" align="center">
<font size="3">ミャー子</font></td>
<th width="180" bgcolor="yellow" align="center">
<font size="3">なな</font></td>
</tr>
<tr>
<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>
<td width="180" align="left">
<font size="2">ミャー子がお散歩中。。</font></td>
<td width="180" align="left">
<font size="2">ななが外で日向ぼっこして<br>います。</font></td>
</tr>
</table>

↓こんな感じでしたね。

ミャー子	なな

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

( ・o・)b font タグを減らしてちょっとすっきりさせてみましょう！！
そのためには、table タグの style 属性に font-size を指定してあげます。
ここでは　font-size:10pt; としておきましょう。
pt というのは、フォントサイズを表す単位だと思ってください。

<table bgcolor="lightblue" border="0" width="360" style="font-size:10pt;" >
<tr>
<th width="180" bgcolor="yellow" align="center">ミャー子</td>
<th width="180" bgcolor="yellow" align="center">なな</td>
</tr>
<tr>
<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>
<td width="180" align="left">ミャー子がお散歩中。。</td>
<td width="180" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>

↓こんな感じになります。見た目はほぼ同じです。

ミャー子	なな

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

( ・o・)b 今度は、
・すべての行をを白に変えて、( tr bgcolor="white" )
・文字色を青に、( color:blue )
・背景色を緑に、( table bgcolor="green" ) してみましょう！！

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

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