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.
Rounded
Table Borders
