WebDevelopersNotes logo

home-icon Home / HTML / Creating complex rounded corners with HTML tables – Part 2

Creating complex rounded corners with HTML tables – Part 2

Creating complex rounded corners with HTML tables - Part 2

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:

Rounded corner: top-left
16×16 pixels
Corner for top-left
Rounded corner: top-right
16×16 pixels
Corner for top-right
Rounded corner: bottom-left
16×16 pixels
Corner for bottom-left
Rounded corner: bottom-right
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.

Three images that make the rounded rectangle

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?

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

JOKE - Being a Programmer

Sponsored Links

Tips

How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]

Fact

As per Steve Job's interview to Walter Isaacson, the Apple Lisa was named after his daughter. It is also often cited that Lisa is an acronym stands for "Local Integrated System Architecture". [more...]