Table Round

Before attempting this lesson you should have a good understanding of basic Tables and how they work. Adding round corners to tables is achieved by using four rounded images placed into the four corner cells of your nine cell table code.

I will provide the four rounded images for you to save and upload to your web page files. If you would like to create different colored corners for your rounded table design, take the four rounded corner images to GifWorks and color them to suit your needs, then save and upload those images for use in your rounded table corner design.

Sample Of Table With Rounded Corners

	Put Some Text Or An Image In This Cell And It Will Center In Your Rounded Table.

Save These 5 Images & Upload Them To Your Web Page Files.
				clear.gif

Below you will see the html code for the rounded table sample above. I have spaced out part of the code so you can see where to add your text and/or images. I have included "comment" tags (you can leave these in the table code, these will not show on your web page) to show you exactly where to start to place your text and/or images and where to stop.

IMPORTANT TABLE TRICKS: Please note how I have placed the closing table cell tags </td> up onto the image line of code, this is an important step to perform in order to achieve a rounded table. Also, important is that you have cellpadding="0" and cellspacing="0" in your rounded table code.

For more on these two table tricks Click Here .

You can adjust the size of your rounded table by changing all the width="200" attributes in the sample table code to any width that you desire.

I have created this rounded table with the use of a clear image (available above with the corner images). The rounded table could be created without the clear image (using other means) but it is more stable and more compatible with all browsers if you use the clear image.

<table cellpadding="0" cellspacing="0" border="0">
<tr><td width="35" height="35">
<img src="topleft.gif" width="35" height="35" border="0"></td>
<td bgcolor="#000000" width="200" height="35">
<img src="clear.gif" width="200" height="35" border="0"></td>
<td width="35" height="35">
<img src="topright.gif" width="35" height="35" border="0"></td>
</tr>
<tr><td bgcolor="#000000" width="35" height="35">
<img src="clear.gif" width="35" height="35" border="0"></td>
<td bgcolor="#000000" width="200" align="center" valign="middle">

<!-- Place Your Text And Images Below This Line -->

<font size="3" color="#ffffff"><b>
Put Some Text Or An Image In This Cell And It Will Center In Your Rounded Table. </b></font>
<p>
<img src="http://www.draac.com/apeheadblack.gif" width="32" height="32">
<p>
<img src="http://www.draac.com/handico.gif" width="20" height="14">

<!-- End Text And Images Above This Line -->

<td bgcolor="#000000" width="35" height="35">
<img src="clear.gif" width="35" height="35" border="0"></td>
</tr>
<tr><td width="35" height="35">
<img src="botleft.gif" width="35" height="35" border="0"></td>
<td bgcolor="#000000" width="200" height="35">
<img src="clear.gif" width="200" height="35" border="0"></td>
<td width="35" height="35">
<img src="botright.gif" width="35" height="35" border="0"></td>
</tr></table>