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.
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:
Make sure you've read and understood the basic tables tutorial first.
Now, note that the
Remember that empty cells need to have
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
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
Once you've done everything right, your finished table will look a little something like this: