その他

HTML テーブルの角を丸くする

更新日:

説明

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

使用例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="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/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="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/tanm.gif" width="15" height="15"
border="0">
</TD>
</TR>
</TABLE>

使用例2

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

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

 

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

HTML記述例

<TABLE border="0" cellspacing="0" cellpadding="0"
background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousin.gif">
<TR>
<TD background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousin.gif" valign="top" align="left">
<IMG src="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/kadol.gif" width="14" height="11" border="0" align="top">
</TD>
<TD height="30" valign="bottom" width="548" background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousin.gif">
</TD>
<TD background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousin.gif" valign="top" align="right">
<IMG src="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/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="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousins.gif" width="11" align="left" height="10" valign="bottom"><IMG src="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/kadols.gif" width="10" height="10" border="0" align="bottom"></TD>
<TD background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousins.gif" width="548" height="10" valign="bottom">
</TD>
<TD background="https://www.sasukepg.jp/wp-content/uploads/2019/06/kousins.gif" width="11" align="right" height="10" valign="bottom"><IMG src="https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/https://www.sasukepg.jp/wp-content/uploads/2019/06/kadoms.gif" width="10" height="10" border="0" align="bottom"></TD>
</TR>
</TABLE>

  • この記事を書いた人

sasuke

インフラエンジニアからwebエンジニアに転職し両方の強みを生かしていければと思います。

-その他

Copyright© さすけのプログラミング入門 , 2019 All Rights Reserved.