> HP制作講座

	サンプル
このように、角の丸いテーブルの作り方です。 仕組みさえ理解すれば、いろいろな種類や色のテーブルが簡単に作れます。 また、角を丸くすることで、他のテーブルより目立たせたり やさしい印象を与えることができます。

角の丸いテーブルの作り方　【わかりやすい解説】

1. はじめに、次のようなテーブルを作ります。

1	2	3
4
5	6	7

▼ソース
<TABLE> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> <TR><TD colspan="3">4</TD></TR> <TR><TD>5</TD><TD>6</TD><TD>7</TD></TR> </TABLE>

---

2. 次に、2,4,6の背景色を指定します。

1	2	3
4
5	6	7

▼ソース
<TABLE> <TR><TD>1</TD><TD bgcolor="#99CCFF">2</TD><TD>3</TD></TR> <TR><TD colspan="3" bgcolor="#99CCFF">4</TD></TR> <TR><TD>5</TD><TD bgcolor="#99CCFF">6</TD><TD>7</TD></TR> </TABLE>

---

3. ひとつの円を4等分した画像を用意します。

当サイトの、「フリー素材」のコーナーでも配布しております。
無料で使用できますので、どうぞご利用下さい。
*近日配布予定

---

4. 用意した画像を、1,3,5,7の角にハメ込みます。

	2
4
	6

▼ソース
<TABLE> <TR> <TD><IMG src="左上"></TD> <TD bgcolor="#99CCFF">2</TD> <TD><IMG src="右上"></TD> </TR> <TR> <TD colspan="3" bgcolor="#99CCFF">4</TD> </TR> <TR> <TD><IMG src="左下"></TD> <TD bgcolor="#99CCFF">6</TD> <TD><IMG src="右下"></TD> </TR> </TABLE>

---

5. 最後に、4に本文を書いて、枠を消せば完成です！

	2にタイトル等を記述できます。
4に本文を書きます。 枠を消せば、全部がつながって1つの丸テーブルになりました♪

▼ソース
<TABLE border="0" cellspacing="0" cellpadding="0" width="430"> <TR> <TD width="15"><IMG src="左上"></TD> <TD bgcolor="#99CCFF" width="400"></TD> <TD width="15"><IMG src="右上"></TD> </TR> <TR> <TD colspan="3" bgcolor="#99CCFF">4に本文を書きます。</TD> </TR> <TR> <TD><IMG src="左下"></TD> <TD bgcolor="#99CCFF"></TD> <TD><IMG src="右下"></TD> </TR> </TABLE>


テーブルや、画像の横幅・縦幅を指定した方が正確に表示できます。
ヨコ：width=""　タテ：height=""

また、画像の枠幅は0を指定しましょう。
border="0"

1,3,5,7の４つの角の画像とセルの幅は、誤差のないように指定しましょう。
例：<TD width="15" height="15"><IMG src="" width="15" height="15"></TD>

---

角のまるいテーブルの作り方の解説は以上です。
基礎的な解説ですので、いろいろと応用してください。


わからない点は、お気軽にお問い合わせ下さい。（無料サポート）