表の角枠を丸くする

まずは下の例を見てください。


	ここに文字を入力

よく見かけると思います。
初めて見かけた時は、衝撃を受けました。
「おぉ！！凄い。一体どうやって・・・」
それから、スタイルシートを探してみたり、タグの属性を探してみたり・・・
そして、今！！

私も5cm程成長しました。

とても単純な事だったんですね。
四隅に画像をおくだけなんです！！
しかし単純故に発見した人は凄いですね。

何が優秀かというと、中身の文字（画像）をいくら追加してもちゃんとサイズが合うところが優秀なんです。
↓例↓


	ほら！！こんな事しても・・・


	こんな　　　　　　アクロバチックな　　　　　　　　　　　　　　　　事をしても・・・

へっちゃらです。

それでは、実際の使い方です。
まず、3X3のテーブルを作ります。

続いて、四隅に画像を配置します。

次に、四隅以外のセルを同じ色で塗りつぶします。

最後に、<TABLE>のBORDER、CELLSPACING、CELLPADDING属性を全て0にします。

後は、中央のセルに好きなだけ、飽きるまで何かを入れてください。


	※注意！！　セルは幾らでも追加してかまいませんが、　表の端のセルだけは、何も入れないことです。　そうしないと、テーブルのデザインが崩れますよ。

如何でしたか？
ちなみに、サンプルとしてWEBセーフカラーと呼ばれる色で作成した角丸を215種類用意しました。
ムダに沢山あるので、お好みの色を使ってみてください。

角丸サンプル

ファイルを解凍後、WebSafeColorフォルダ内にあるsample.htmをご覧下さい。

ソース表示

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
  <TR>
    <TD><IMG SRC="images/333399lt.gif"></TD>
    <TD BGCOLOR="#333399"></TD>
    <TD><IMG SRC="images/333399rt.gif"></TD>
  </TR>
  <TR BGCOLOR="#333399">
    <TD></TD>
    <TD>
    <FONT SIZE="-1" COLOR="#ffffff">ここに文字を入力</FONT>
    </TD>
    <TD></TD>
  </TR>
  <TR>
    <TD><IMG SRC="images/333399lb.gif"></TD>
    <TD BGCOLOR="#333399"></TD>
    <TD><IMG SRC="images/333399rb.gif"></TD>
  </TR>
</TABLE>

▲BACK

IT SOHO CLUB