Rounded Corners
Working with tables, you might soon become tired of their rigid, blocky look. Everything is straight edges and corners. You can smooth out these corners on your tables, however, and have nice rounded rectangles on your page. It's simple too, you just need some small graphics and the right table layout.
This page was last updated on 2012-08-21
The Table
|
|---|
Right, we'll go with this simple example. This is the table we're going to make rounded. The corners have to be cells on their own, with nothing else in them. I have put an 'o' in each of the corner cells, so you can predict how this is going to work out. There are four corners, so we'll need four square-shaped images to put into these cells. Each of the curves will be different because they are facing different ways.
The code for your table will be:
<table border="0" width="200" cellpadding="0" cellspacing="0">
<tr bgcolor="#cc00cc">
<td width="15">o</td>
<td width="170"> </td>
<td width="15">o</td>
</tr>
<tr bgcolor="#cc00cc">
<td width="15"> </td>
<td width="170" bgcolor="#cc3399" align="center">
main content cell
</td>
<td width="15"> </td>
</tr>
<tr bgcolor="#cc00cc">
<td width="15">o</td>
<td width="170"> </td>
<td width="15">o</tr>
</table>
Make sure you've read and understood the basic tables tutorial first. Now, note that the width is defined both overall and in each table cell, and the border, cellpadding and cellspacing are all set to 0. This is to make sure there is no space between the cell sides and the images you'll be putting into them.
Remember that empty cells need to have s in them so that they display. If you use the code above you may find that the rows are too tall — it's because of those non-breaking spaces, since they are the same height as size 3 text. All you need to do is wrap a low-sized font tag around them, like so:
<font size="1"> </font>
Using the height attribute of table cells may help too — set them to the same as your image sizes.
The Graphics
 |
|---|
 |
Now, I go into my graphics editor; anything that can save an image as a gif will do. Pick a definite size you're going to make your corners — your cell widths will have to be the same. It's probably a good idea to have your table structure made first, so you know the dimensions and colours you'll be using. I made my dimensions 15x15, for some nice small curves, but you can have big ones if you want.
Just start with a square, and make sure that the background is the same colour as the background behind the table, to preserve the anti-aliasing (softening) effects. Use a round brush and add in the curve, drawing with the exact colour that the table's bgcolor is set to (so you get a perfect match). When you have made one, flip and mirror your image to create the other corners. Remember when naming your graphics to put their positions in for easy placement — try 'topleft.gif' etc.
Now just place each image into the corresponding table corner. Remember when doing this to keep the table structure tight — don't have any spaces between the tags, especially between the image tags and the tds. If the spacing doesn’t look right, try adding style="line-height: 0px" to the tr elements to make the rows narrower.
Once you've done everything right, your finished table will look a little something like this:
|
|
|
|
Main Content cell |
||
|
|
