Skip to main content

The Trick to Rounded Corner Tables

By Andrew Schroeder



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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? .rounded corners

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. 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. height=”80″>

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.

<body bgcolor="#B0C0D0">
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<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>
<td><!-- Blank left section --></td>
Enter your content here
################### -->
<!--Blank right section -->
<td width="20"><img src="bl.gif" width="20" height="20"></td>
<!--Blank bottom section -->
<td width="20"><img src="br.gif" width="20" height="20"></td>

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, mobile forums, 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.

Andy is the Chief Creative Designer for Fusion-IN Creative Internet Design.

New books out now!

Learn valuable skills with a practical introduction to Python programming!

Give yourself more options and write higher quality CSS with CSS Optimization Basics.