楽天コミュニティBlog

2009.02.21

HTMLタグ　テーブルの基本

テーマ：ホームページ作成の悩み(545)

カテゴリ：パソコン,HTML,副業

「 <table>～</table> 」は表の全体にかかわります。
「 <tr>～</tr> 」は表の一行にかかわります。
「 <td>～</td> 」は表の一マス

の3つです。

使う時は、必ずこの形でいきます。 <table><tr><td>～</td></tr></table>

このように「 td 」→「 tr 」→「 table 」とサンドイッチしていくのです。

[完成例]

と書くと...

1行目の1列目	1行目の2列目	1行目の3列目
2行目の1列目	2行目の2列目	2行目の3列目

と表になります。

ただし、通常ですと枠は表示されませんので、
今回は「 border=""

ちなみに、「 border="" 」にいれる数字が大きくなると、枠も太くなります。

たとえば「 border="5" 」なら

「<table border="5"

↓

枠ができました

と、このように枠が太くなります。

逆に枠を表示したくないときは、「 border="0" 」にします。

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

どうです？
おもったより簡単でしょ。

つまり、
「 tr 」が増える→「行が増える」
「 td 」が増える→「列が増える」
ということになるのです。

■ テーブルの大きさを指定する

テーブルの大きさを設定するときは
「 width 」属性と「 height 」 属性をつかいます。

このとき、テーブルのヨコ幅を「 width 」属性で
テーブルのタテ幅を「 height 」属性で指定します。

「 width 」を300にした例：

●

○

□

■

（「&LT;table border="1" width="300" &GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

同時に「 height 」を100にした例：

●

○

□

■

（「&LT;table border="1" width="300" height="100" &GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

このようにテーブルの大きさを変えることができました。

■テーブルの色を変える

テーブルに色をつけるときは、「 bgcolor 」属性をつかいます。

この属性は「 table 」はもちろん、「 tr 」「 td 」にも設定できます。

たとえばこの例をみてください。

まずは「 table 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bgcolor="#ffcc99" &GT;
&LT;tr&GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

さらに「 tr 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bgcolor="#ffcc99" &GT;
&LT;tr bgcolor="#ff9999" &GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td&GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

さらに「 td 」に色を設定：

●

○

□

■

→

（「&LT;table border="1" bgcolor="#ffcc99" &GT;
&LT;tr bgcolor="#ff9999" &GT;&LT;td&GT;●&LT;/td&GT;&LT;td&GT;○&LT;/td&GT;&LT;/tr&GT;
&LT;tr&GT;&LT;td bgcolor="#ff9933" &GT;□&LT;/td&GT;&LT;td&GT;■&LT;/td&GT;&LT;/tr&GT;
&LT;/table&GT;」と入力）

このように好きな部分に色をつけていくことができます。

たとえば、マス目のなかの色を全部変えて、枠だけ目立たせるとか。
いろいろ応用ができます。

[ サイトマップ ]

[ 楽天市場 ]

[ Home ]

お気に入りの記事を「いいね！」で応援しよう