The Trick to Rounded Corner Tables

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

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://sitepoint.com Aaron Osteraas

    Hey,

    Thanks for the notification, the images have been fixed.

  • http://www.charlesyarbrough.com Charles

    Isn’t there just a table or css setting to round the table naturally?

  • http://chaso.tk Mobile forum

    Thanks for help,can you assist us for css round corners?

  • fred

    lol, why would anyone want to do this when its already supported by css?

    e.g.
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;

    • Ahem *fred*

      Because this was written in 2001, when rounded corners were not supported…?