表の角枠を丸くする

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

ここに文字を入力

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

私も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