Create tables with rounded corners

From The IT Community
Jump to: navigation, search




Had enough of those tables with the pointy edges on your web site? Just create some with round ones.

All you need are a few gif files and you are ready to go.


Use this code in the <body> part of your site:


<table width="200" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td width="16"><img src="corner1.gif" width="16" height="16" border="0"></td>
 <td width="168" style="background-image: url('side1.gif');">
 <img src="blank.gif" width="1" height="16" border="0" alt="..." />
 </td>
 <td width="16"><img src="corner2.gif" width="16" height="16" border="0"></td>
 </tr>
 <tr>
 <td style="background-image: url('side4.gif');">
 <img src="blank.gif" width="16" height="1" border="0" />
 </td>
 <td>inside the table</td>
 <td style="background-image: url('side2.gif');">
 <img src="blank.gif" width="16" height="1" border="0" />
 </td>
 </tr>
 <tr>
 <td>
 <img src="corner3.gif" width="16" height="16" border="0">
 </td>
 <td style="background-image: url('side3.gif');">
 <img src="blank.gif" width="1" height="16" border="0" />
 </td>
 <td>
 <img src="corner4.gif" width="16" height="16" border="0" alt="...">
 </td>
 </tr>
 </table>

As you can see, you need 4 images for the corners (corner1-4.gif) and 4 images for the sides (side1-4.gif). blank.gif is just a spaceholder you might need.

Replace the text "inside the table" with whatever you want to put into the table and you are done...



Was this article helpful? Then please donate to keep The IT Community alive...

If you found this article helpful please share it, comment and help others by writing your own article.






Translate this page:




Articles found in the same category:
(max. 20 shown)