Rounded Table Borders
      by Robert Bell AKA RabBell : 11 March 2005

Introduction
There are many different ways to do this and many different opinions on how it should be done. I have used a table to demonstrate how I do it. It could have been done with a DIV and Iím sure some people would feel more comfortable with doing it with a DIV but Iíve chosen a table, mainly because I think tables are easier for beginners to understand and comprehend.

Using Photoshop Iíve created a rounded rectangle as so:

Make sure you have the width you were looking for before continuing because whatever width you make this rectangle is the going to be the width of your table. Iíve made it small for the sake of this tutorial but somewhere between 740 and 780 pixels is good for 800x600 viewers.

Now make sure you have the history menu in Photoshop opened. If not click Window in the menu and select history. Now select the crop tool and crop your image so all you have left is the top part of the table. Youíll want to remove some of the grey too.

Now in the history toolbar click back a step to when before the rectangle was cropped. Now do the same with the bottom of the table and call it bottomimage.jpg

At this point you would think we could start with the CSS and HTML coding but before we do itís probably best to open up both the bottom and top jpeg files and check they are the same width (for obvious reasons). Once your happy itís on to the coding.

Ok, this is what I started with:

<body bgcolor="#FFFFFF">
<table width=Ē391pxĒ align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr><td>Top Row</td></tr>
<tr><td>Content Row</td></tr>
<tr><td>Bottom Row</td></tr>
</table>
 
</body>

Page colour has to be the same as the background colour of your image so that the rounded corners donít lose their effect. And set both the cellpadding and cellspacing to zero. The top and bottom images are going to sit on your table, changing these settings will disrupt how they are going to appear.

The width of the table should be the same width of images created earlier. In my case itís 391 pixels but obviously change this to whatever size your images were.

Now itís the CSS. You can add this to a stylesheet and attach it to the page but because weíre only working on one page Iíve added it to the head section of the page.

<style>
.topimage{background-image:url(topimage.jpg);
background-repeat:no-repeat;
background-color:#FF7200;}
 
.bottomimage{background-image:url(bottomimage.jpg);
background-repeat:no-repeat;
background-color:#FF7200;}
 
.backcolor{background-color:#FF7200;}
</style>

The topimage class display the topimage jpeg but not repeat it. Itís important this is set because if for any reason you place content in this part of the table then the image would repeat over and over again until it reached the desired height. With this setting here it wonít repeat it but use the background colour setting to fill the space.

The backcolour class will be used for the content row just to fill out the table and complete the effect.

Back to the html now:

<body bgcolor="#FFFFFF">
<table width=Ē391pxĒ align="center" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
<tr><td height="22px" class="topimage"></td></tr>
<tr><td class="backcolor">Content Row</td></tr>
<tr><td height="20px" class="bottomimage"></td></tr>
</table>
</body>


As you can see Iíve added the classes to the relevant rows and added a height restriction on the top and bottom rows. The reason for this is because at the moment these rows are empty and on some browsers the rows appearance is affected because it is empty. If I were to add content (depending how much) I would be tempted to remove the height sizes.

As a result this should be your output:

Try increasing the text size in your browser and you should see the table grows with it. If you are going to split the content row into several columns remember and add the colspan attribute to both the top and bottom rows.

Remember there are several ways to accomplish this effect, this is just one.
 

  Robert Bell aka RabBell
www.rbell.net

 

 



SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.