Creating Rounded Tables

Start by deciding what the width of the table is going to be. If the table is for your entire layout, I suggest using 720. With a width of 720, the site will show up perfectly in any resolution of 800x600 or greater. Once decided, go to photoshop (or paint shop pro) and create a new image that is the width of your table, and any height really. Now draw out your rounded rectangle, in photoshop it is located under the shape tools, and the radius can be set to whatever you like. Add a stroke style (photoshop only) to add a border around your rectangle, and then slice it up.

From there, you can go to File > Save For Web... and export this image as an HTML page.

Once you have your HTML page created, open it up and edit a few things. First, change the table so instead of having an image sitting in the table, there is just a background in the table. You can see what I mean from the following code:

This is the table before editing:

CODE

<TABLE WIDTH=400 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD> <IMG SRC="images/Untitled-1_01.gif" WIDTH=400 HEIGHT=26></TD> </TR> <TR> <TD> <IMG SRC="images/Untitled-1_02.gif" WIDTH=400 HEIGHT=149></TD> </TR> <TR> <TD> <IMG SRC="images/Untitled-1_03.gif" WIDTH=400 HEIGHT=25></TD> </TR> </TABLE>

This is the table after editing:

CODE

<TABLE WIDTH=400 BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD background="images/Untitled-1_01.gif" width="400" height="26"> </TD> </TR> <TR> <TD background="images/Untitled-1_02.gif" WIDTH=400 HEIGHT=149> </TD> </TR> <TR> <TD background="images/Untitled-1_03.gif" WIDTH=400 HEIGHT=25> </TD> </TR> </TABLE>

Put all your main content in the second TD. If you sliced the image properly, the content TD should have an unlimited height.

Tutorial By Xtasy