Introduction
One of the best effects which you can use on your website to make it look more professional is rounded table corners. They can be used very effectively to create borders, blocks of colour, navigation bars and many other effects. Throughout this tutorial we will show you how do this.
The software used in this tutorial is Macromedia Fireworks but you can use nearly any image software.
Creating The Table
The first example in this tutorial will be a table looking like this:
| | | |
| | This is where your table content is placed if you want it there. | |
| | | |
A simple block of colour with rounded corners. Firstly, you create a normal coloured table but slightly different to how you would normally do it. You should add 2 rows and 2 columns to the table you want (for example if you want a table with one cell you should create one with 3 rows and 3 columns as follows:
The central cell will be used for your content and the other ones will be for the edging. You should set the border, cell padding and cell spacing of the table to zero for this to work.
Before you create the corners you will need to make the table the right colours. Set the background of all the cells to the colour red (#FF0000).
Creating The Images
The actual corners for the table are created using 4 images. This is where your graphics program is required. Firstly, create a new image with a white background which is 25 pixels high and 25 pixels wide. Choose the circle tool and draw a circle touching the edges of the image but with only quarter of the circle in the image like this:
Next, set the fill colour of the circle to red which will produce this:
Finally, export or save the image as topleft.gif
Then, use the rotate function to rotate the image 90 degrees clockwise, save it as topright.gif. Rotate it another 90 degrees and save it as bottomright.gif then do it one more time and save it as bottomleft.gif. You should now have a set of images like this:
Creating The Table
Now all you have to do is insert these images in your table. In each of the corner cells place the appropriate image. You will now have something which looks like this:
Now all you need to do is set the alignment of the two right cells to 'right' and your table will nearly be complete. Just add the text to the center cell and you now have a table with rounded corners:
| | | |
| | This is where your table content is placed if you want it there. | |
| | | |
Part 2
In part two I will show you how you can use this same technique to create inside corners for your table, creating a frame round your content.