Making the Table
Close psp and open your HTML editor or even Notepad. What we want to make is a table with 3 rows and 3 columns. Like this:
<html> <head> <title>round table<title> </head> <body bgcolor="333399" text="333333" link="669933">To make a Table - Copy and Paste this html code into your editor or in notepad just changing the names of your images if they are different.
Change the background & inner table colors to match yours.(this is your hex code or set of 6 numbers and/or letters. I am using background #333399 and table background #336699
<TABLE WIDTH="30%" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="20">Upper left corner .gif here</TD> <TD WIDTH="100%" BGCOLOR="#336699">spacer.gif here</TD> <TD WIDTH="20">Upper right corner .gif here</TD> </TR> <TR> <TD WIDTH="20" BGCOLOR="#336699">spacer.gif here;</TD> <TD WIDTH="100%" BGCOLOR="#336699" ALIGN="CENTER"> <P> </P>
To make this work in the most number of browsers, there must be something in each "cell"and to make it work at any size, we use the spacer.gif. Of course you need to write in a link to your images as in
Save as "roundtable.html"(or your own name)in the same directory as your img folder. The folder should look similar to this and inset is what I have in the img folder. I also made a smaller table inside the table with the green corners.
The advantage to doing it this way rather than making a graphic & using the image slicer is, the page will load much faster as it only needs the tiny corner graphics, then there can be more time spent loading your own images !! As an example I reduced the size of my main page from 32 KB to 6 KB.
Click on the Logo to see my main page using this table set-up. I hope you've enjoyed this tutorial,
Need help? the HumanClick button below will get you a quick answer.