The Trick to Rounded Corner Tables
About the Author
Andrew Schroeder
Andy is the Chief Creative Designer for
Fusion-IN Creative Internet Design.
By: Andrew Schroeder
May 1st, 2001
One technique that has always been of interest to new Web designers is building rounded corners for the tables in their site.
So how do they get that "professional" look? .
It's actually a relatively easy task with most graphic editors. It is a technique that makes table layouts look smooth and flowing and gives the web page a "print copy" look. I will give an explanation of how to accomplish this with the most popular professional graphics editor, Adobe Photoshop [1]. The same steps will apply to any graphic editor and layout tool you may choose to use.
Regardless of which tool you use, the technique is the same: Create a circle or rounded rectangle, and then cut it up to make corners that you can insert into a table. For the example we will build a table that has corners of 20 pixels.
Making the corners in Photoshop
 |
Begin in your graphic editing software with a 40 x 40 pixel image. |
 |
Fill the background with the color that the background of your page will be. |
 |
Next, draw a circle that fills your work area in the same color you would like to use for your table. It is best to use anti-aliasing for this circle to get a smooth curve. |
 |
Last, depending on which type of graphic editor you are using, either slice the picture or crop it into 4 equal sections. I named my sections tl.gif, tr.gif, bl.gif, br.gif, as in "top left", "bottom right", etc. |
Here are the pieces after they have been sliced up:
 |
 |
 |
 |
Putting the corners into your table
Using a WYSIWYG(what you see is what you get) editor is the easiest way to layout your table. It makes inserting the images easier, and you can see the table take shape in front of your eyes.
| To insert the corners properly, you'll need a table 3 columns wide, and 3 rows tall. Set the background color of your page to the same color that you used to make the background for your images, in this case I used the same color as the background for Sitepoint - #B0C0D0, and the background color of your table to #FFFFFF (white) for this example. |  |
| Set the widths of the corner cells to 20 pixels to match the size of the corners so the table will hold it's shape. Also, make sure to set the cellpadding and cellspacing to 0 so that the images align properly. |  |
| Insert the corners in their respective positions. |  |
Write your content, and you're DONE!
Sample code and images
Here is some sample code and images for you to experiment with. Right click and "save target as" to grab the images. Copy and paste the code.
<html>
<body bgcolor="#B0C0D0">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td width="20"><img src="tl.gif" width="20" height="20"></td>
<td><!-- Blank top section --></td>
<td width="20"><img src="tr.gif" width="20" height="20"></td>
</tr>
<tr>
<td><!-- Blank left section --></td>
<td>
<!--###################
Enter your content here
################### -->
</td>
<td>
<!--Blank right section -->
</td>
</tr>
<tr>
<td width="20"><img src="bl.gif" width="20" height="20"></td>
<td>
<!--Blank bottom section -->
</td>
<td width="20"><img src="br.gif" width="20" height="20"></td>
</tr>
</table>
</body>
</html>
Don't stop there!!!
You can use this technique for many interesting effects. You can make rounded rectangles and slice them up so you can have a rounded border line around your tables, or you can round the edges of a page. Experiment, and look at the structure of other pages to see how rounded table corners can make a stunning presentation.
[1] http://www.adobe.com