色々なテーブル枠 1

■ 色々なテーブル枠1

今回は、テーブルの作り方応用編です。

今までのテーブルは

ここに画像や文章をいれる	ここに画像や文章をいれる
ここに画像や文章をいれる	ここに画像や文章をいれる

↓入力ソース

<table border="1">
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
</table>

ここに画像や文章をいれる	ここに画像や文章をいれる
ここに画像や文章をいれる	ここに画像や文章をいれる

↓入力ソース

<table border="1" bordercolor="#ff9900">
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
</table>

ここに画像や文章をいれる	ここに画像や文章をいれる
ここに画像や文章をいれる	ここに画像や文章をいれる

↓入力ソース

<table border="1" bordercolor="#ff9900" cellspacing="0">
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
<tr><td>ここに画像や文章をいれる</td>
<td>ここに画像や文章をいれる</td></tr>
</table>

でした。

今回のテーブルは、今までのテーブルと比べて、枠の線を
より細くキレイに見せることができます。

ここに文章や画像を入れる	ここに文章や画像を入れる
ここに文章や画像を入れる	ここに文章や画像を入れる

↓入力ソース

<table bgcolor="ff9900" cellspacing="1" cellpadding="5" width="100%">
<tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td>
<td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr>
<tr><td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td>
<td width="50%" bgcolor="#ffffff">ここに文章や画像を入れる</td></tr>
</table>

今までは「table」の中に、外枠を表示する属性「border=""」を入れていたと思いますが
今回は入れないでテーブルをタテ・ヨコに並べていく方法です。

<table>の中に入れる属性

「bgcolor=""」は、今回の場合は、外枠の色を表します。
「cellspacing=""」は、外枠の太さを表します。
「cellpadding=""」は、外枠と、枠の中の（画像・文字）の間隔を調節します。
「width=""」は、テーブルのヨコ幅を指定。

<td>の中に入れる属性

「bgcolor=""」は、テーブル内の背景色を表します。
「width=""」は、テーブルのヨコ幅を指定。

今回のポイントは

【1】
<table>の中に「border」属性を入れない
テーブルの中に、cellspacing」「bgcolor」「cellpadding」の属性を入力する。

【2】
<td>の中に、「width」「bgcolor」属性を入力する。

これらを入力し忘れると、テーブルが崩れます！
「width=""」に入れる属性は「%」でも「数字」でもOK です。

ちなみに「100%」にした場合、横幅いっぱいにどこかにぶつかるまで伸びていきます。
「50%」は、その半分になります。

「width="50%"」にした場合

ここに文章や画像を入れる	ここに文章や画像を入れる
ここに文章や画像を入れる	ここに文章や画像を入れる

↓入力ソース

<table bgcolor="ff9900" cellspacing="1" cellpadding="5" width="50%">
<tr><td bgcolor="#ffffff" width="50%">ここに文章や画像を入れる</td>
<td bgcolor="#ffffff" width="50%">ここに文章や画像を入れる</td></tr>
<tr><td bgcolor="#ffffff" width="50%">ここに文章や画像を入れる</td>
<td bgcolor="#ffffff" width="50%">ここに文章や画像を入れる</td></tr>
</table>

慣れるまでは大変かも知れません。
でも、このテーブルの作り方を覚えておくと結構便利です。