Welcome ... I'm glad you stopped by for
Graphic + Internet related tutorials

Triple or Quadruple Backgrounds
using double or triple tables for HTML page layout






To create a triple, or quadruple, table border on a web page you need to ...

  • create a table within a table (within a table, etc.)
  • decide which colors and background tiles you want to fill the areas.

The coding shown here is available on a text file, and also as a PDF file. You can save either one to your computer.
Download Adobe Acrobat PDF Reader free.

I was inspired to try this on one of my own pages after seeing Leah's Border Boutique's Triple Background Tutorial. The page it creates looks great in version 4 browsers. Unfortunately, I found that it doesn't look good in version 3 browsers. Detailed explanation of "why" is below. This tutorial is adjusted so that it will look the best it can in both.

  • Right after your <HEAD> tags on your page, put in the information for the page's basic display.
    Note, multiple lines shown here because of wordwrapping, but it must be all on ONE line in your HTML code, do not put a line break in these HTML codes.
    Your link color, followed link color (vlink), activated link color (alink=color link flashes to the moment it's clicked on), and background color that coordinates with your background tile.
    Always a good idea in case there is a reason your background image doesn't load, at least the color displayed will be in the same color family as your background image, and not the "default color" of your visitor's browser!
  • Everywhere you see _choose_color_, you will have to choose a hexdecimal color code. There is a color chart in the Web Page Help section for you to use. Save the sections to your computer if you can't print that page out.
  • Where you see _choose_image_ is where you will place your background tile's image name.

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

<BODY TEXT="#_choose_color_" LINK="#_choose_color_" VLINK="#_choose_color_" ALINK="#_choose_color_" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_">

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="90%" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_" BORDERCOLOR="_choose_color_" <TR><TD>

<BR><BR>

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="80%" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_" BORDERCOLOR="_choose_color_" <TR><TD>

<BR><BR>

Start your text here ...
Put whatever you want to have ... images, text, etc.
At the end of your page, finish it off with:

</TD></TR></TABLE>
<BR><BR>

</TD></TR></TABLE>
<BR><BR>

</BODY></HTML>

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

If you're curious what colors and images this page has used, here's my coding. Please do NOT direct link to my images. If you want texture tiles to create a page, they're in the Miscellaneous section of my Themed Graphics, take them with you to use/experiment with.

<BODY TEXT="#000000" LINK="#000000" VLINK="#5A5A5A" ALINK="#0080000" BGCOLOR="#D0D4C5" BACKGROUND="zrrGrnTxtTile66.jpg">

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="90%" BGCOLOR="#D0D4C5" BACKGROUND="rrGrnTxtrTileDrk2a.jpg" BORDERCOLOR="000000"><TR><TD><BR><BR>

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="80%" BGCOLOR="#D0D4C5" BACKGROUND="zrrGrnTxtTile66.jpg" BORDERCOLOR="000000"><TR><TD><BR><BR>

Then start my text ...
 



divider bar






Quadruple Table
HTML Page Layout ~ Tutorial !

To create a quadruple table border on a web page, (remember, the page's background counts as "one") just add another table. Read the details above, just add one more "table layer" around your text.

<BODY TEXT="#_choose_color_" LINK="#_choose_color_" VLINK="#_choose_color_" ALINK="#_choose_color_" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_">

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="90%" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_" BORDERCOLOR="_choose_color_"> <TR><TD><BR><BR>

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="80%" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_" BORDERCOLOR="_choose_color_"><TR><TD><BR><BR>

<TABLE ALIGN=center BORDER=2 CELLSPACING=0 CELLPADDING=5 WIDTH="70%" BGCOLOR="#_choose_color_" BACKGROUND="_choose_image_" BORDERCOLOR="_choose_color_"><TR><TD><BR><BR>

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

Start your text here ...

Put whatever you want to have ... images, text, etc.

At the end of your page, you finish it off with:

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

</TD></TR></TABLE>
<BR><BR>
</TD></TR></TABLE>
<BR><BR>
</TD></TR></TABLE>
<BR><BR>

</BODY></HTML>
 



divider bar





If you want to see what the quadruple table looks like to Netscape 3 browsers, or other browsers that don't support backgrounds in table cells, I have a screen shot here. It is a large file, 570 pixels wide x 957 pixels long, and is a 69kb image. It's compressed, so there will be some distortion in the words, but you will get the idea of what some browsers would see.

I can only "go by" my visitors. About 14% of this site's visitors are ones that would see a bad looking page if I had not adjusted the coding for the tables. Maybe that's not enough for you to worry about, but I wanted to be sure that as many people possible see, at least, an "acceptable" looking page.

What you need to be sure of, is that your tripple or quadruple backgrounds look as good as possible to as many people as possible. YOU can't control the browser that is used by your visitors. You will want your pages to 'look good' for just about anyone, right?
 



Tutorial © 1999 Roxy Flanagan
These copyrighted graphics are for free use, for this tutorial purposes only.
The tutorial graphics shown on these pages may NOT be placed in any collection or sold,
or copied and placed on ANY web site, or distributed in any way.
If you want to share this information with others, send this URL (web page address) to them!
Texture tile background © 1998 Roxy M. Flanagan.

Tube Use + Graphic Creation Tutorials:

Using TubesSeamless BorderSeamless TileVector Text on a Path using PSP
Combining Graphics and HTML
Fancy HTML tutorial:Triple Table HTML Page Layout

Webmasters, see the "Web Page Help" section for LOTS of information!

Internet Users Tutorials:
Downloading
from the Internet
Using WS_FTPUsing Winzip Installing both
pIRCh and mIRC
Popups
+ fancy IRC text

Tutorial List Page (+ links to more tutorial websites) ... Tutorial Rings Page

www.AutumnWeb.com SITEMAP


... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

Roxy Recommends:
Autumn Web
Web Development

Personal+Business
Custom Web Graphics