Rounded Table Corners Tutorial

**AQUARIAN** · 27-Feb-2007, 12:40 AM

Rounded Table Corners Tutorial
Part 1 - Introduction
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 li
ke 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.

="25">

**AQUARIAN** · 27-Feb-2007, 12:41 AM

Introduction

In the last part of this tutorial I showed you how to use HTML and your image program to create rounded corners for your HTML tables. In this part I will show you how to create inside corners and how to make a 'frame' round your content.

Creating The Inside Corners

In this part I will show you how to create a table slightly different from last week:

This is where your table content is placed if you want it there.

This works better with large amounts of text (or full web pages) but could be used for anything. To create this you have to create a table with 5 rows and 5 columns. The cell spacing and padding should be 0 and there should be no border. As with the last example the central cell will contain the content. The outer cells will contain the border. The cells between the outer border and the content will be the margin and will contain the inside corners.

Now you must set the background colours of all the outside cells to red (#FF0000) and set the widths of the two outer colums to 25 pixels.

>

Creating The Images

As with the other example all the corners are made from images. You can use the four you created for the last table:
img src="http://www.freewebmasterhelp.com/static/tutorials/corners/topleft.gif" width="25" height="25">

and, as with that table, they should be placed in the four corner cells. You must also create four inside corner images. These are made in exactly the same way as the outer corner images with a few differences. When you create your 25x25 image this time, set the background to red. Then draw a circle like the one for the outer corners but this time make it white. As before, rotate the image four times and you will be left with 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 inner 4 corner cells (the ones between the content and the border place the appropriate corner. If you need to, adjust the alignment and the widths and heights of the cless. You should now have a table like this:

height="25"> This is where your table content is placed if you want it there.

Creating 'Frames' On Your Site

One of the best uses of rounded table corners is to create a 'frame' for your site. One very good example is to make a table like the one above except making the left border column wider. This can then contain your navigation bar. All the page's content will go in the central cell, containing your whole site in a coloured frame.

Another thing you could do is to create a half frame like this:

N
A
V
I
G
A
T
I
O
N

This is where your table content is placed if you want it there.

This is where your table content is placed if you want it there.

This table actually has 5 columns and 5 rows.

One of the best things about rounded table corners is that the same ones can be used over and over again for many different designs, only changing the colours. You could even save the ones from this page!

Conclusion

Rounded table corners are an easy but effective effect to produce and should give you lots of new design ideas. The designs here are only ideas but there are thousands you could create. Sometimes you will need to make slightly different images but the basic idea is the same.

**AQUARIAN** · 27-Feb-2007, 12:42 AM

source :Free Webmaster Help - Everything A Webmaster Needs- For Free

27-Feb-2007, 12:40 AM	#1 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Rounded Table Corners Tutorial Rounded Table Corners Tutorial Part 1 - Introduction 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 li ke 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. ="25">

27-Feb-2007, 12:41 AM	#2 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Rounded Table Corners Tutorial Introduction In the last part of this tutorial I showed you how to use HTML and your image program to create rounded corners for your HTML tables. In this part I will show you how to create inside corners and how to make a 'frame' round your content. Creating The Inside Corners In this part I will show you how to create a table slightly different from last week: This is where your table content is placed if you want it there. This works better with large amounts of text (or full web pages) but could be used for anything. To create this you have to create a table with 5 rows and 5 columns. The cell spacing and padding should be 0 and there should be no border. As with the last example the central cell will contain the content. The outer cells will contain the border. The cells between the outer border and the content will be the margin and will contain the inside corners. Now you must set the background colours of all the outside cells to red (#FF0000) and set the widths of the two outer colums to 25 pixels. > Creating The Images As with the other example all the corners are made from images. You can use the four you created for the last table: img src="http://www.freewebmasterhelp.com/static/tutorials/corners/topleft.gif" width="25" height="25"> and, as with that table, they should be placed in the four corner cells. You must also create four inside corner images. These are made in exactly the same way as the outer corner images with a few differences. When you create your 25x25 image this time, set the background to red. Then draw a circle like the one for the outer corners but this time make it white. As before, rotate the image four times and you will be left with 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 inner 4 corner cells (the ones between the content and the border place the appropriate corner. If you need to, adjust the alignment and the widths and heights of the cless. You should now have a table like this: height="25"> This is where your table content is placed if you want it there. Creating 'Frames' On Your Site One of the best uses of rounded table corners is to create a 'frame' for your site. One very good example is to make a table like the one above except making the left border column wider. This can then contain your navigation bar. All the page's content will go in the central cell, containing your whole site in a coloured frame. Another thing you could do is to create a half frame like this: N A V I G A T I O N This is where your table content is placed if you want it there. This is where your table content is placed if you want it there. This table actually has 5 columns and 5 rows. One of the best things about rounded table corners is that the same ones can be used over and over again for many different designs, only changing the colours. You could even save the ones from this page! Conclusion Rounded table corners are an easy but effective effect to produce and should give you lots of new design ideas. The designs here are only ideas but there are thousands you could create. Sometimes you will need to make slightly different images but the basic idea is the same.

27-Feb-2007, 12:42 AM	#3 (permalink)
AQUARIAN Fixed Error! Posts: 803 Join Date: Feb 2007 Rep Power: 2 IM:	Re: Rounded Table Corners Tutorial source :Free Webmaster Help - Everything A Webmaster Needs- For Free

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)