Creating complex rounded corners with HTML tables - The advanced tutorial Part 2

[ben2ong2]

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.

By now, I guess you would have realized that the secret (if there was any) lies in the images that we have used for the rounded corners. So let us start on creating complex rounded tables.
Here is the simplest of the complex rounded tables that we are going to create.

   
This is a Rounded table

You would typically place your content here.
 
   

This rounded table is made using 8 images - 4 for the rounded corners and the rest are employed for the borders of the four sides. Here are the four images used for the corners:


16x16 pixels
Corner for top-left
16x16 pixels
Corner for top-right
16x16 pixels
Corner for bottom-left
16x16 pixels
Corner for bottom-right

The four sides are made by very thin images - The top and bottom edges are created using 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 - the image used for the top edge and the left edge.


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 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 1x1 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, here are some nice looking tables with complex rounded corners - remember, it's all in the images!

   
This is a Rounded table

You would typically place your content here.
 
   

   
This is a Rounded table

You would typically place your content here.