Before we delve on how to create complex rounded corners, let me point out that the roundedness of the table depends on the curves of the image and, thus, the size of the circle that you started with. So if your circle image was large, it will result in a table with smoother and larger curves and if the circle was small, the rounded curves would be tighter – Click to view example.
By now, I guess you would have realized that the secret, if there was any, lies in the images that were used for the rounded corners. So let us start on making some complex rounded tables.
Click here of the simplest of complex rounded tables (oxymoron? LOL) that we are going to create.
This rounded table is made up of 8 images – 4 for the rounded corners and the rest are used for the borders of the four sides. Here are the four images used for the corners:
 16×16 pixels Corner for top-left |
 16×16 pixels Corner for top-right |
 16×16 pixels Corner for bottom-left |
 16×16 pixels Corner for bottom-right |
The four sides (border) are very thin images. The top and bottom edges have images that are 1 pixel in width and the left and right edges are of images that are 1 pixel in height. Since each of our corner image is 16 pixels in both width and height, the images for the top and bottom edges are 16 pixels in height (to match the corners) and the ones for the left and right sides are 16 pixels in width. Thus, the images for top and bottom edges are 1 pixel in width and 16 pixels in height and images for left and right edges are 16 pixels in width and 1 pixel in height.
Because these images are too small (or thin, if you like) to be displayed at their present dimensions, I have magnified the top-left corner of our table to show you two of the four images – those of the top and the left edges.
The above depicts 3 of the images used in the rounded rectangle – the image for the top-left corner, the image used for the top edge and the image that makes the left border.
Now an important point: The four borders are made up of very thin images and hence these images are employed as backgrounds for their respective table cells. Here is the code:
<table width="200" cellpadding="0" cellspacing="0" border="0"> <tr> <td width="16"><img src="rounded1.gif" width="16" height="16" border="0" alt="..."></td> <td width="168" style="background-image: url('back1.gif');"> <img src="blank.gif" width="1" height="16" border="0" alt="..." /> </td> <td width="16"><img src="rounded2.gif" width="16" height="16" border="0" alt="..."></td> </tr> <tr> <td style="background-image: url('back4.gif');"> <img src="blank.gif" width="16" height="1" border="0" alt="..." /> </td> <td>ACTUAL CONTENTS</td> <td style="background-image: url('back2.gif');"> <img src="blank.gif" width="16" height="1" border="0" alt="..." /> </td> </tr> <tr> <td> <img src="rounded3.gif" width="16" height="16" border="0" alt="..."> </td> <td style="background-image: url('back3.gif');"> <img src="blank.gif" width="1" height="16" border="0" alt="..." /> </td> <td> <img src="rounded4.gif" width="16" height="16" border="0" alt="..."> </td> </tr> </table>
The code in blue is the one I would like you to pay attention to. Here I have employed the background-image style property and have specified the four images as backgrounds of their respective table cells which will then make the top, bottom left and right borders. Note the use of blank.gif image which is a 1×1 pixel transparent gif. This blank image will help you in adjusting the width of table cell without spending time and messing things up.
Before I end this article, click here to view some nice looking tables with complex rounded corners – remember, it’s all in the images!
There is more. On the previous two pages, I have detailed how to employ images for rounded tables. This is kind of outdated because most modern browsers now support those CSS (Cascading Style Sheets) properties that will give you equivalent results.
So what are the benefits? Firstly, you don’t need to play around with messy HTML table tags. Secondly, no images are employed, which results in faster page loading time. Thirdly, since you would typically put CSS in a separate file, the styles can be changed quickly without editing the actual web page. And lastly, you segregate design from contents because, after all, HTML table tags were not meant for this, right?
