TABLEタグ（１）

||　フリーページ一覧表へ戻る　||　ＨＴＭＬ　Ｑ＆Ａ　掲示板へ　||　ＴＡＢＬＥタグ（２）へ　||

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

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

● 写真を見出しとコメントつきで並べるには？

それでは、３行２列の表を作ってみましょう。。

<table border="1">
<tr>
<td>ミャー子</td>
<td>なな</td>
</tr>
<tr>
<td><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="280" height="210" alt="ミャー子"></td>
<td><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="280" height="210" alt="なな"></td>
</tr>
<tr>
<td>ミャー子がお散歩中。。</td>
<td>ななが外で日向ぼっこしています。</td>
</tr>
</table>

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

ミャー子	なな

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

※ img タグの alt 属性はマウスカーソルを写真の上に合わせたときに出るコメントです。alt="なな" とすると、写真の上で「なな」と表示されます。

( ・o・)b ちょっと写真を小さくして見ましょうか？
写真を小さくするには、img タグの width と height の値を変えます。

<table border="1">
<tr>
<td>ミャー子です。</td>
<td>ななです。</td>
</tr>
<tr>
<td><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子"></td>
<td><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな"></td>
</tr>
<tr>
<td>ミャー子がお散歩中。。</td>
<td>ななが外で日向ぼっこしています。</td>
</tr>
</table>

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

ミャー子	なな

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

( ・o・)b あれれ！ななの写真のある列の方が広くなって、写真の横に隙間が開いちゃいましたね。
これは、ななの写真のサイズより、「ななが外で日向ぼっこしています。」のコメントの長さの方が長いためなんです。

２つの写真のある列を同じ幅にしてみましょう！！
そのためには、table タグの width で幅を指定して、なおかつ、td タグの width にも幅を指定してみましょう。
table 全体の幅を 360 に、２列なのでそれぞれの列の幅は 360 の半分の 180 にしてみましょう。

<table border="1" width="360">
<tr>
<td width="180">ミャー子</td>
<td width="180">なな</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">ミャー子がお散歩中。。</td>
<td width="180">ななが外で日向ぼっこしています。</td>
</tr>
</table>

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

ミャー子	なな

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

( ・o・)b 今度は、２つの列の幅がそろいましたね。
それでは、もうちょっと工夫してみましょう！！
・１行目の見出しの部分の
　背景を黄色に、 ( bgcolor="yellow" )
　文字を太く、( td を th に変える )
　真ん中に寄せて、( align="center" )
・３行目のコメントを左寄せの指定にして、( align="left" )
・全体の文字の大きさを変えて ( font タグを使う )
みましょう！！

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

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

ミャー子	なな

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

( ＾o＾)b 今度は、いい感じになりましたね。
それでは、さらに工夫してみましょう！！
全体の枠のでっぱりをとってみましょう。( table タグの border="0" )

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

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

ミャー子	なな

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

( ＾o＾)b それでは、table 全体の背景をライトブルーにしてみましょう！！
table タグ　( bgcolor="lightblue" )

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

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