簡単テーブル２

BACK TOP NEXT



リボン テーブルのつくりかた　２ リボン

ｩ テーブル枠の太さを変える ｩ

Pink Angel


<table border="5"><tbody><tr><td>ここに文字</td></tr></tbody></table>

『border="5"』の所の数字を好みで変えて下さい♪




ｩ テーブル枠に色をつける ｩ

Pink Angel


<table border="3" BORDERCOLOR="#枠の色"><tbody><tr><td>ここに文字</td></tr></tbody></table>




ｩ テーブルの枠と背景に色を付ける ｩ

Pink Angel


<table border="1" bgcolor="#枠の色"><tbody><tr><td bgcolor="#背景色">ここに文字</td></tr></tbody></table>




ｩ テーブル内の余白を作る ｩ

余白なし
余白あり


<table border="1" cellpadding="★"><tbody><tr><td>ここに文字</td></tr></tbody></table>

★の所に数字を入れてください。大きいほど余白が広がります。




ｩ 二つのテーブルを並べる ｩ

ピンクのテーブル
ブルーのテーブル


<table><tr><td><table border="1" bordercolor="FF7ED4" cellspacing="☆" cellpadding="★" bgcolor="FFD1E4"><tr><td bgcolor="white"><font size="1">ピンクのテーブル</td></tr></table></td><td><table border="1" bordercolor="66CCFF" cellspacing="☆" cellpadding="★" bgcolor="99DFFF"><tr><td bgcolor="white"><font size="1">ブルーのテーブル</td></tr></table></td></tr></table>

それぞれ☆と★に数字を入れてください。
☆：数字が大きくなるほどテーブルとテーブルの間が広がります。
★：数字が大きくなるほどテーブル内の余白が広がります。




ｩ 横にテーブルを並べる ｩ

テーブルの基本構成はこの形です。
<table><tr><td>～</td></tr></table>

ここで一マスにかかわる「td」を増やしていきます。

<td>を2つ並べると。。。。

１のテーブル
２のテーブル


となります

<table border="1" bordercolor="#枠の色"><tr><td>１のテーブル</td><td>２のテーブル</td></tr></table>


<td>を並べることで、このように枠を増やすことができるのです♪

<td>を3つ並べると。。。。

１のテーブル ２のテーブル ３のテーブル


と、どんどんテーブルが増やせますハート

<table border="1" bordercolor="#枠の色"><tr><td>１のテーブル</td><td>２のテーブル</td><td>３のテーブル</td>/<tr></table>




ｩ 縦にテーブルを並べる ｩ

今度は一行にかかわる<tr>を増やしていきます。
つまり、<tr>が2つだと2行、3つだと3行になります。

もちろんこのとき<tr>でサンドイッチした<td>もいっしょに増やします。

【<tr>を2つ並べた例】

１の枠 ２の枠 ３の枠
４の枠
 ５の枠 ６の枠


<table border="1" border="1" bordercolor="#枠の色"><tr><td>１の枠</td><td>２の枠</td><td>３の枠</td></tr><tr><td>４の枠</td><td>５の枠</td><td>６の枠</td></tr></table>


このように<tr>（中の<td>もいっしょに）を増やすと、
行を増やしていくことができるのです。

おもったより簡～単ヽ( ･∀･*)ﾉでしょ？

つまり、

<tr>が増える→『行が増える』
<td>が増える→『列が増える』

ということになるのです ｯ


template- yamato

© Rakuten Group, Inc.
X

Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: