角の丸いテーブルを創る方法

角を丸くしたテーブルを創ってみようと思います・・・


では、順を追って紹介してみますね・・・

1. 先ず、4つの画像を用意します・・・　 　
   
   
2. これは、フリー素材の利用やペイントで創って用意して下さい
   
   
3. 一行目を下のように記述します・・・
   <table>
   <tr>
   <td>img src="左上角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右上角の画像.gif"></td>
   </tr>
   </table>
   
   
4. するとこの様に表示されます・・・
   
   
5. 二行目の記述を追加します・・・
   <table>
   <tr>
   <td><img src="左上角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右上角の画像.gif"></td>
   </tr>
   <tr>
   <td height="80px" style="background:#FFCECE"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td height="80px" style="background:#FFCECE"></td>
   </tr>
   </table>
   
   
   
6. するとこの様に表示されます・・・
   
   
7. 最下段の三行目の記述を追加します・・・
   <table>
   <tr>
   <td><img src="左上角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右上角の画像.gif"></td>
   </tr>
   <tr>
   <td height="80px" style="background:#FFCECE"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td height="80px" style="background:#FFCECE"></td>
   </tr>
   <tr>
   <td><img src="左下角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右下角の画像.gif"></td>
   </tr>
   </table>
   
   
   
8. すると、この様に表示されます・・・
   
   
9. 最後にテーブルの余白、内側の余白を全てゼロに指定します・・・
   cellspacing="0" cellpadding="0"をタグの中に追加します
   <table cellspacing="0" cellpadding="0">
   <tr>
   <td><img src="左上角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右上角の画像.gif"></td>
   </tr>
   <tr>
   <td height="80px" style="background:#FFCECE"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td height="80px" style="background:#FFCECE"></td>
   </tr>
   <tr>
   <td><img src="左下角の画像.gif"></td>
   <td width="150px" style="background:#FFCECE"></td>
   <td><img src="右下角の画像.gif"></td>
   </tr>
   </table>
   
   
   
   すると角の丸いテーブルが完成しました。
   
   

久し振りの今日の小技は如何でしたか？