TOP > HP関連>

テーブルの角を丸くする

説明

テーブルの角を丸くするとデザインが綺麗に見えます。
一見作るのが難しそうに見えますが画像を角に使うだけで簡単に作ることが出来ます。
使用例1

両端に2枚の画像を使用して作ったシンプルな例です。
使用例

線を表示すると以下のようになります。
使用例

実際に使用した画像です。

HTML記述例
<TABLE border="0" cellspacing="0" cellpadding="0" width="467" height="27">
<TR>
<TD width="20" bgcolor="#9999ff" valign="top" align="left">
<IMG src="tanl.gif" width="15" height="15" border="0">
</TD>
<TD bgcolor="#9999ff" width="420"><B><FONT color="#ffffff">
使用例</FONT></B>
</TD>
<TD bgcolor="#9999ff" align="right" valign="top" width="27">
<IMG src="tanm.gif" width="15" height="15" border="0">
</TD>
</TR>
</TABLE>

使用例2
単色でのテーブルは良く紹介されているので今回は表の背景にも画像を使用して、より立体的な
テーブルにしてみました。
3個のテーブルを組み合わせて作っています。

分かりやすいように線を表示すると以下のようになります。
 

使用した画像、全部で6枚の画像を使っています。

HTML記述例
<TABLE border="0" cellspacing="0" cellpadding="0" background="kousin.gif">
<TR>
<TD background="kousin.gif" valign="top" align="left">
<IMG src="kadol.gif" width="14" height="11" border="0" align="top">
</TD>
<TD height="30" valign="bottom" width="548" background="kousin.gif">
</TD>
<TD background="kousin.gif" valign="top" align="right">
<IMG src="kadom.gif" width="14" height="11" border="0" align="top">
</TD>
</TR>
</TABLE>

<TABLE bgcolor="#5ba2ee" width="576">
<TR>
<TD bgcolor="#ffffff" height="71" >
</TD>
</TR>
</TABLE>


<TABLE border="0" cellspacing="0" cellpadding="0" width="576">
<TR>
<TD background="kousins.gif" width="11" align="left" height="10" valign="bottom"><IMG src="kadols.gif" width="10" height="10" border="0" align="bottom"></TD>
<TD background="kousins.gif" width="548" height="10" valign="bottom">
</TD>
<TD background="kousins.gif" width="11" align="right" height="10" valign="bottom"><IMG src="kadoms.gif" width="10" height="10" border="0" align="bottom"></TD>
</TR>
</TABLE>


最近の記事
当サイトについて  免責事項  プライバシーポリシー
Copyright (C) Sasuke 2012 All rights reserved.