Unofficial Tips and Tutorials for Homestead SiteBuilder™ Users


Home - Tips & Tutorials - JavaScript Demos - Java Applet Demos - Resources - Contact

The Nested Tables Tutorial: Introduction, Table Code & Tips >>>

Introduction

SiteBuilder does not have elements for creating nested tables or triple backgrounds, whatever term you know them as. But, you can use SiteBuilder to set your page properties and the page's background settings.

For the tables on top of the page you need to grab the HTML from a dummy page you create in a WSIWYG editor such as Microsoft FrontPage, another page editor or from right here. Sometimes, if you grab some graphics for nested tables at a web graphics designer's site, they will also include the HTML for the tables. Or you can view their page source to grab the HTML, too. But the bottom line here is, you have to know some HTML for this.

You copy-and-paste the tables HTML into the Insert HTML element in the Elements Palette. Make the changes you need to do for the background tiles, any links, any images you add, and your text. Re-size the element to fit the size you indicated and you're set. This is where a little bit of HTML knowledge comes in handy as you need to know what the HTML tags are and how to use them.

The Table Code

Here's the HTML code for a two-table, triple background or nested tables set. This code has adjustments for use at Homestead sites and is specifically made for use with SiteBuilder. (In SiteBuilder, do not use the part before the <body> tag and after the </body> tag.)

<table background="files/tile.jpg" cellpadding="xx" cellspacing="0" width="xxx%" border="x" bordercolor="#xxxxxx">
<tr>
<td width="100%"><div align="center"><center>
<table background="files/tile.jpg" cellpadding="xx" cellspacing="0" width="100%" bgcolor="#xxxxxx" border="x" bordercolor="#xxxxxx">
<tr>
<td width="100%">
<p>Body of text, images, and links</p>
</td>
</tr>
</table>
</center></div></td>
</tr>
</table>

The table width described on the first line of the code, which is for the outside or bottom table, should be in percentages. Usually, 85-90% will give you a nice border of the page background. The inside or top table width should be 100% when cell spacing or padding is used for the outside table; smaller % if no cell spacing or padding is used. Make sure you set the Insert HTML element's width to whatever you feel comfortable with - it'll expand to accommodate the visitor's monitor resolution anyway; the height doesn't matter. Just don't put other elements too close to the table. Check in View format to be sure.

The table border and cell padding are numerical settings expressed in pixels. You can choose not to have a border, but personally, I think a border in a coordinating color looks nice. A border size of 3-5 pixels is good. Use zero (0) if you do not want a border or just omit the tag.

Cell padding is the amount of space between the edge of the table cell and the content within the table cell. A cell padding of 10 or more pixels allows the tile to be displayed nicely rather than being covered up by the top table which happens if you do not use cell padding on the bottom table. On the top table, it allows for nice "white space" or a less crowded look of your content. Use zero (0) if you do not want cell padding.

The bgcolor (background color) and bordercolor are expressed in hexadecimal units of a combination of six letters and numbers. Here is a very good visual guide to colors in Hex code from Visibone. Also very helpful visually are these guides at Lynda.com and Webmonkey.

Important Tips:

1) About background colors in a nested table: You can set the background color for the page and you can probably use a background color only, rather than a tile, for the bottom table. But for the top table I advise not using just a background color. Use a solid background tile whether patterned or plain color.

The reason is the page's background tile or color may "bleed" through to the top table when viewed in a Mozilla-based browser. If you use a tile, the bleed-through doesn't occur.

2) Regarding nested tables and transparent GIFs: If you use a transparent GIF, such as an animation within the table, the transparent background of the GIF will show the page's background - again the bleed-through effect. So if you don't want a strange-looking GIF, use the same tile for the page background as for the top table.

3) Homestead suggests you not use more than two tables nested. Homestead uses framesets and tables as well, and any more tables will cause your page and/ or browser to malfunction. So far I've had no such problem but it could happen.

So with those cautionary tips in mind, I suggest you use at least two tiles for your backgrounds on the page and the two tables. I suggest using a plain-colored tile for the top table rather than a busy patterned one so that your text is readable. If you cannot find plain tiles, I'm offering some here. They're free to grab, but you must save them to your own hard drive rather than direct-linking to them. No credit and link back to me is necessary unless you want to. ;-)

So what about the text and images I want to put in the table, you ask? Continue to the next page where I talk a little about HTML, HTML tags, and how to put them together for your table content. I also present two demos to compare.

Next Page >>>

 
Formerly hosted at
www.geocities.com/ramblingtutor/

Home - Tips & Tutorials - JavaScript Demos - Java Demos - Resources - Contact

Webpage graphics by Arride Graphics
Copyright © 2000- Rambling Tutor and JanetS
All Rights Reserved
All other copyrights belong to their respective owners as noted.


Plus 260 visitors before joining Site Meter on June 11, 2001