表の角枠を丸くする

ソース
<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>

サンプル
どれだけ長い文章を入れても、外枠も同じように広がるので関係ありません。
縦方向でも


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

如何でしたか?
ポイントは、テーブルの四隅に画像を配置して、その他のセルの背景色を画像と同じ色にすることです。

ちなみに、サンプルとしてWEBセーフカラーと呼ばれる色で作成した角丸を215種類用意しました。
もし宜しければ、下記のファイルをダウンロードしてお好みの色を使ってみてください。

角丸サンプル

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


▲BACK


IT SOHO CLUB