Creating rounded corners with HTML tables - Part 1

Creating rounded corners involves a working knowledge of HTML tables and for that you can refer to the in-depth HTML table tutorial. If you are already familiar with the various tags associated with HTML tables and their attributes, you can go ahead and dig right into this tip else, I would recommend that you first read the HTML table tutorial in the Advanced HTML Tutorial.

That said, creating rounded corners in no rocket science. We simply employ HTML tables to create the layout accomplish our task - which is to produce something like the table with rounded corners below.

	This is a Rounded table You would typically place your content here.

Remember, all elements on a web page are rectangular and this includes images! This should come as no surprise because the screen on our monitors is rectangular and so is the browser window and the active space in the browser (the space that displays the web page). Take a look at the image below. Though it might look circular it's actually a rectangle (a square to be precise) - read more about why images are rectangles.

The background color of the image above is the same as that of this web page (white - hexadecimal code #FFFFFF) and because of this it seems that the image is only the green colored circle. However, this is not true. The green circle us surrounded by white color which is actually our image background color. If we place the image is a table with a blue background, we can then see the area occupied by the image.

Now you see the white space that surrounds the green circle - don't you?
OK! So what does all this have to do with creating tables with rounded corners? A lot, my good visitor! Now that we understand that though images are rectangles, they can be employed to give a semblance of other shapes. The shape that we would use are the four quarters of a circle. But before jumping to all that, let us create our HTML code on which we will work further.

The first step is to understand that a table with rounded corners is created by a table with 3 columns and 3 rows; thus, a total of 9 table cells - like the table below:

Cells 1, 3, 7 and 9 will contain the four quarters of a circle, cells 2, 4, 6 and 8 will form the top, left, right and bottom edges and Cell number 5 will have the actual contents. The four quarters of a circle that we plan to use are four different images. And to create these images you need the assistance of your favorite graphics editing tool. Any graphics tool will let you create a circle. Once you have done so, you need to split it into 4 squares and these will be the four quarters.

For example, in Paint Shop Pro or Adobe Photoshop, start by creating a new image of 28x28 pixels. Draw a circle right in the middle of the image. IMPORTANT note: be sure that you have the anti-aliasing option selected before you draw the circle. Then with the selection tool extract 14x14 pixels from the top left. You can repeat this for other quarters or simply flip and mirror the first quarter that you've created. you need to save all the four images with different file names. So starting with an image of a circle, we can get 4 quarters as below:

Our starting image

Top-left corner

Top-right corner

Bottom-left corner

Bottom-right corner

We will now place the four images in 3x3 table inside the corresponding cells as detailed above, remove the borders, padding to give us our rounded rectangle.

<TABLE WIDTH="200" CELLPADDING="0" CELLSPACING="0" BORDER="0"
STYLE="background-color: #9C084A">
<TR>
<TD WIDTH="14"><IMG SRC="rounded_corner1.gif" WIDTH="14" 
HEIGHT="14" BORDER="0" ALT="..."></TD>

<TD WIDTH="172"></TD>

<TD WIDTH="14"><IMG SRC="rounded_corner2.gif" WIDTH="14"
HEIGHT="14" BORDER="0" ALT="..."></TD>

</TR>
<TR>

<TD></TD>

<TD ALIGN="CENTER">ACTUAL CONTENT</TD>

<TD></TD>

</TR>
<TR>

<TD><IMG SRC="rounded_corner3.gif" WIDTH="14" HEIGHT="14"
BORDER="0" ALT="..."></TD>

<TD></TD>

<TD><IMG SRC="rounded_corner4.gif" WIDTH="14" HEIGHT="14"
BORDER="0" ALT="..."></TD>

</TR>
</TABLE>

Pay close attention to the code marked in blue.
The width of the HTML table can be anything number that you want, BUT be sure to that the cellpadding, cellspacing and border attributes are set to a value of zero (0). You would also need to give a background color to the table which should be the same color as that of our circle (now split into quarters). I would recommend that you use styles to specify the background color as I have done with style="background-color: #9C084A;" instead of using the BGCOLOR attribute as its been deprecated.
You will notice that some table cells are empty... you can put a transparent 1x1 pixel gif resized to the correct width and height it you want.
Lastly, DO NOT forget the ALT attribute for the images as this is now a required attribute and your HTML page will not validate correctly if you skip it.
The above code will render a table similar to the one I displayed at the beginning of this article - View the table with rounded corners.

Changing the height and width of the table with rounded corners

As I mentioned above, the width of the table with rounded corners can be anything you want. However, the beauty of this table code is that you dont have to do anything about its height. The height of this table is controlled by the actual contents... the contents placed in cell #5. So depending on the amount of content we place in this cell, the height of the table will increase on its own. Take a look below:

	Scarborough Fair Are you going to scarborough fair? Parsley, sage, rosemary and thyme. Remember me to one who lives there. She once was a true love of mine. Tell her to make me a cambric shirt, (a hill in the deep forest green) Parsley, sage, rosemary and thyme; (tracing of sparrow on snow-crested brown) Without no seams nor needle work, (blankets and bedclothes the child of the mountain) Then she'll be a true love of mine. (sleeps unaware of the clarion call) Tell her to find me an acre of land, (on the side of a hill a sprinkling of leaves) Parsley, sage, rosemary and thyme; (washes the grave with silvery tears) Between the salt water and the sea strand, (a soldier cleans and polishes a gun) Then she'll be a true love of mine. Tell her to reap it with a sickle of leather, (war bellows blazing in scarlet battalions) Parsley, sage, rosemary and thyme; (generals order their soldiers to kill) And gather it all in a bunch of heather, (and to fight for a cause they've long ago forgotten) Then she'll be a true love of mine.

This was the first part of the creating a table with rounded corners. Now let us see how we can create more advanced and complex corners of such tables. This is discussed in the next part - Complex and more advanced rounded corners for HTML tables.

| 1 | 2