The process of getting rounded corners and other rounded shapes through tables is rather easy. In fact, I've now used the process a few times on some different Web sites. Notice how the corners of the orange "card" are rounded. If you can't quite make it out from the screen shot below.

Those rounded corners were achieved through the use of tables and some small square images that give the impression that one corner has been rounded off. Let's take a look at how it's done.

The Table Structure
Here's the deal. In order to achieve this effect, you're going to have to understand tables and how they work. You will most likely have to know how to set a table cell's height and width, and possibly how to use the COLSPAN and ROWSPAN commands. We won't be getting into the basics of table creation here.

The table that created the "card" in the screen capture above is set up so that three "corners" are set aside. That way I can fill that corner with a small image that has it's corner rounded off. If that didn't make much sense, stay tuned. It'll get easier. Here's the same thing as above except with the table walls exposed.

Now you can most likely see why you'll need to know the ins and outs of using height and width commands in your table cells. That table above has a height and a width set for every cell so that it retains its shape.

Once again - EVERY cell has both a height and a width. Don't rely on only putting one width per column or one height per row. Set them all to force the computer's hand.

The Corner Images
Here are the three corner images that were used to create the effect. I have them in a table cell with the background set to black so you can see the image's shape a little better:

.. ..

I named the images "orangeupperleft.gif", "orangelowerleft.gif", and "orangelowerright.gif" just so I could keep them straight as to where they went in the grand scheme.

They're Not All Images
If you look at the table format again, you'll notice large sections of orange. Because the little corners are images, you might think that the larger sections are also images. That's not the case. They are just table cells that have a BGCOLOR set that equals the corner image's color. Here's the table screen capture again. I have placed a red "X" on the table cells that get their color through a BGCOLOR command rather than an image:

It's basically everything other than the corner images themselves.

The thing you MUST keep in mind is that when creating the corner images, the color you use must be the exact same Hex code color as you will use in the table cell backgrounds. That way the images and the cells with color will meet up flawlessly.

And speaking of making those images...

Making The Images
Before I get into the images, let me explain that this is how I do it. I am by no means saying that this is the only method to getting the effect. This is simply how I get the rounded corner.

Now, onto the good stuff. These are the steps I use to create the look.

1. Before you do any image work, layout the page and build the table. Build it using height and width attributes in each of the table cells. Build it with the colors you want to use. Choose a background color for the page. Note that the background of the page above is white, thus the "rounding" effect is achieved by making part of what will be a square image, white.

I would suggest that you try to get your corner images square. It will make things a whole lot easer later on.

Are you still with me? Everything is square. You are simply giving the illusion of roundness by taking a square image and rounding a corner. If that image has the same color as the background and the same color as the remainder of the table, then the effect will perfectly blend in.

The reason I say to do all of that first is that by first building the table and choosing the colors, you will know exactly how large an image you will require and what color you will use to create the image. In addition, you'll know what color to use to blend the corner of the image into the background.

Now that you have all that, move along.

2. Now let's build the corner pieces. Let's say that your corner pieces are going to be 100X100. Note again that the image is square.

In your image editor, create an image that is 100X100 filled with the same color as the background as the page. Now you know it will blend into the background.

Now choose to use your image editor's "Shape" tool. This is the tool that will allow you to draw a shape on the 100X100 image. You should be able to choose from many different shapes. You want to choose to draw a circular shape. Make sure the Shapes tool will only draw the shape. Do not allow the tool to fill in the shape it draws.

Here's the trick!

You want to draw your circle so that the arc meets the edges of the image at the same number of pixels along the top edge as along the side edge. If that doesn't happen, you get a lop-sided arc. Maybe you want that look. If so, go for it. I'm just staying basic for this tutorial. Later on you can try all kinds of strange and wonderful arc formats.

To get the effect, find the exact middle of your image. This is why a perfectly square image is best to work with. The exact middle will be the half the length and half the width. So, the exact middle of our 100X100 image is the 50,50 pixel point. Most image editors will show you the pixels points as you roll your pointer over the image.

Get your pointer to that exact middle point, and click. As you start to drag your mouse, the circle will begin to draw. Keep dragging until the circle touches all four sides at the same time. When it happens, unclick. You should get something that looks like this:

3. This is the basis for all of your arcs. Notice how you now have a square image broken into five sections. This single image can now acts as any corner. In fact, it can act as both an internal or external corner. All you need to do now is use your image editor's "Fill" function to fill in the color. The Fill function is usually denoted by a little paint can tipping a drop of paint.

Just make sure to fill in the correct parts to create the correct corner. Here's an upper left-hand corner:

Here's a Tip: More than likely, your corners will all be the same size. If they're not, redo the table and get them all the same size. Once you have the square with the circle drawn, save it. Now you have a single image that will create every corner. The corners will look more uniform that way.

Simply open the circled image, fill in what you want and then choose "Save As" to save the image under a new name. Re-open the round image again and fill in for the next corner. Just keep doing that and you'll have four uniform corners.

4. Internal corners will use the exact same format. You'll just fill in different sections of the image and erase what's left of the circle. Here's an upper left internal corner:

I erase the circle's lines by choosing the image program's shapes tool, setting it to the background color, and also setting it to fill in the color rather than just draw the shape. I then chip away at the lines.

That's That
Now you've got the images. Just plug them into the table you've already built and you should get nice rounded corners inside of a square table.

Here's one more hint. When building the table, set the border to zero and make a point of running all of the table code together. Do not leave any spaces from <TABLE> to </TABLE> and the cells will butt right up against each other.

Tutorial worked up through HTML Goodies