七鍵＠楽天

前回テーブルについての基本的なことを紹介しましたが、
今日はもう少し踏み込んで勉強しましょう(〃⌒▽⌒)
とは言いましても、表（ひょう）機能としてのテーブルはもう説明しません。
あくまでデザインに使えそうな機能に特化して説明を進めていきます。

前回は枠の中で特定の位置に文書や画像を配置する方法を紹介しました。
「align」や「valign」を使うってことでしたよね(〃⌒▽⌒)
今回はもっと有効に、この「align」や「valign」を使用するために、
テーブルの枠自体の大きさを指定する方法をまず勉強しましょう。

例）
<table border="1">
<tr><td width="150" height="150" align="left" valign="bottom">左下</td>
<td width="150" height="150" align="right" valign="top">右上</td></tr>
</table>

表示結果）

左下

右上

線を消した表示結果）

左下

右上

「align」や「valign」の使い方はもうばっちりですよね(〃⌒▽⌒)
今回新しく「TD」タグに指定した「width」と「height」ですが、これもどこかで見たことないですか？
以前「IMG」タグで画像の幅と高さを指定する際に使いましたよね。
同じようにテーブルの一マスの幅を指定する場合には「TD」に「width」を、
テーブルの一マスの高さを指定する場合には「TD」に「height」をそれぞれ指定します。
テーブルの一マスの幅と高さを指定することにより、
文書や画像を思いのままの場所に配置することができるってわけですね(￣▽￣人)

ってわけで、今日のお勉強は終わりです。
もう少し物足りないって方のために、テーブルを使用した小技を少し紹介しておきますね(〃⌒▽⌒)
どうぞご自由にお使いください。

例）
<table cellspacing="0"><tr>
<td bgcolor="#ffcccc" width="20" height="20"></td>
<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20"></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" height="20"></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc"></td>
</tr></table>

表示結果）

	ようこそ私のＨＰへ(〃⌒▽⌒)

例）
<table cellspacing="0"><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr></table>

表示結果）

★		★
	ようこそ私のＨＰへ(〃⌒▽⌒)
★		★

例）
<table cellspacing="3" border="3" bordercolor="#ff9999"><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr></table>

表示結果）

★		★
	ようこそ私のＨＰへ(〃⌒▽⌒)
★		★

どうでしょう？
少しずつ変えるだけでもテーブルって面白いでしょ(〃⌒▽⌒)
上記の例は色や幅をちょこちょこ変えていろいろアレンジしてみて下さいね。

明日の予定は・・・
例によって未定です(´･ω･`)
未定ですが休みませんのでまたぜひ来てくださいね(ﾟ▽^*)ﾉ⌒☆