HTML - Creating rounded corners with HTML tables - Part 1

[ben2ong2]

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.


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:

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.