ホームページ制作代行　流文-nagarefumi-

ホームページ制作/SOHO/福岡
Eメール　tk-1980@mx4.et.tiki.ne.jp

[HP講座]

[サイトマップ]

■　特殊なテーブル

yahooなどにあるテーブルの作り方を紹介します。

		テーブル

テーブルを作る特殊な方法として、セルの高さ、横幅を小さくして、色を付け枠線に用いるという方法があります。
上のテーブルもセルに色をつけて枠線に用いています。
つまり

<table>
<tr><td height="3" width="200" bgcolor="red"></td></tr>
</table>

こんな感じで使います。
この方法を用いると、テーブル構成は、

こうなり、4行4列のテーブルで構成されています。３行目の２列目のセルと３列目のセルを結合しています。
実際に４行４列のテーブルを作ります。
分かりやすいように各セルの大きさを大きめにします。

<table border>
<tr>
<td width="10" height="30" bgcolor="red"></td>
<td width="100" bgcolor="red"></td>
<td width="100"></td>
<td width="10"></td>
</tr>
<tr>
<td height="30" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td height="30" bgcolor="red"></td>
<td></td>
<td></td>
<td bgcolor="red"></td>
</tr><tr>
<td height="30" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
</table>

各セルの高さを調節します。
３行目の２列目のセルと３列目のセルを結合します。
セル間隔とセル内の空白を0（cellspacing="0" cellpadding="0"）にします。
borderをはずします。

<table cellspacing="0" cellpadding="0">
<tr>
<td width="2" height="20" bgcolor="red"></td>
<td width="100" bgcolor="red"></td>
<td width="100"></td>
<td width="2"></td>
</tr>
<tr>
<td height="2" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td height="100" bgcolor="red"></td>
<td colspan="2"></td>
<td bgcolor="red"></td>
</tr><tr>
<td height="2" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
</table>

最後に角の部分（

）ですが、これはテーブルでは表現不可能なので画像を
使います。１行目３列目のセルに画像を挿入します。

<table cellspacing="0" cellpadding="0">
<tr>
<td width="2" height="20" bgcolor="red"></td>
<td width="100" bgcolor="red"></td>
<td width="100"><img src="gazou/table4.gif"></td>
<td width="2"></td>
</tr>
<tr>
<td height="2" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
<tr>
<td height="100" bgcolor="red"></td>
<td colspan="2"></td>
<td bgcolor="red"></td>
</tr><tr>
<td height="2" bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
<td bgcolor="red"></td>
</tr>
</table>

　　

→次へ

→メニューへ

△△ページトップへ△△


[HP制作]	[HP講座]	[日記]	[サイトマップ]	[掲示板]	ホームページ制作代行サービス　流文-nagarefumi- Eメール tk-1980@mx4.et.tiki.ne.jp