corner image   corner image

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:

Upper left corner .gif here spacer.gif here Upper right corner .gif here
spacer.gif here;


Content goes here



spacer.gif here;
Lower left corner .gif here spacer.gif here; Lower right corner .gif here
First set up your page background
	<title>round table<title>

<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

      <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>
      <TD WIDTH="20" BGCOLOR="#336699">spacer.gif here;</TD>
      <TD WIDTH="100%" BGCOLOR="#336699" ALIGN="CENTER"> 
<P>Content goes here</P>
<P>&nbsp;</P> </TD> <TD WIDTH="20" BGCOLOR="#336699">spacer.gif here;</TD> </TR> <TR> <TD WIDTH="20">Lower left corner .gif here</TD> <TD WIDTH="100%" BGCOLOR="#336699">spacer.gif here;</TD> <TD WIDTH="20">Lower right corner .gif here</TD> </TR> </TABLE>

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
<img src="img/corner_tr.gif">

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,

go back

Need help? the HumanClick button below will get you a quick answer.

corner image   corner image