Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
Part of Gowansnet
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
Macromedia Fireworks
Adobe Photoshop
Jasc PaintShop Pro
More Rounded Table Corners Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

Rounded Table Corners Tutorial
Part 2 - Advanced Corners

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.

© 1999 - 2001 David Gowans