Creating rounded corners with HTML tables – 1

Creating rounded corners involves a working knowledge of HTML tables. If you are already familiar with the various tags associated with HTML tables and their attributes, go ahead and dig right into this tip else, I recommend reading the Advanced HTML Tutorial.

That said, creating rounded corners in no rocket science. We simply employ HTML tables to create the layout and accomplish our task – click to view the rounded table.

Remember, all elements on a web page including images are rectangular! 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 area in which the web page is displayed).

Take a look at the image below. It’s of a circle, right? However, the graphic is 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 the web page (white – hexadecimal code #ffffff) because of which it seems that the image is circular. 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 can see the white space that surrounds the green circle, right? OK! So what does all this have to do with creating tables with rounded corners? A lot, my good friend… a lot!

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 the HTML code on which we will work further.

The first step is to understand that a table with rounded corners is created with 3 columns and 3 rows, 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 which will be the four quarters.

For example, in Paint Shop Pro or Adobe Photoshop, start by creating a new image 28×28 pixels in dimensions. Draw a circle right in the middle of the image. IMPORTANT: be sure that you have the anti-aliasing option selected before you draw the circle.

Then with the selection tool extract 14×14 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 get the 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 the 3×3 table inside their corresponding cells as detailed above, remove the borders, the padding which will 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" alt="..." /></td>

<td width="172"></td>

<td width="14"><img src="rounded_corner2.gif" width="14"
height="14" 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"
alt="..." /></td>

<td></td>

<td><img src="rounded_corner4.gif" width="14" height="14"
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 ensure that the cellpadding, cellspacing and border attributes have the value 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 since it’s now deprecated.

You will notice that some table cells are empty… you can put a transparent 1×1 pixel gif resized to the correct width and height if you want.

Lastly, DO NOT forget the alt attribute for the images as this is now a required else the page will not validate.

The above code will render a table similar to the one I displayed at the beginning of this article.

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 don’t 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 change on its own – Click here to check this rounded table.

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 for such tables. This is discussed in the next part – Complex and more advanced rounded corners for HTML tables.