template Using tables FAQ
What are tables?
From the perspective of design screens in WYSIWYG (What You See is What You Get) HTML editors such as Dreamweaver and FrontPage, tables are rectangular boundaries made up of smaller rectangles called cells, used to control content placement on web pages.
What is cell padding?
Cell padding is space between the cell wall and the content within the cell.
What is cell spacing?
Cell spacing is the space between cells.
What is a row?
A row is a line of horizontal table cells. A row may have one cell or many. The widths of cells in each row plus any cell spaces must equal and never exceed the width of the table in which they reside. It is important to figure the math for each row of cells in a table. For instance, if a table is 600 pixels wide, the width of the cells and cell spaces, when added together, must not exceed 600 pixels. A row will be as tall as the tallest cell in the row.
What is a column?
A column is a line of vertical table cells. A column may have one cell or many. A column will be as wide as the widest cell in the column.
What is table stacking?
That is when tables are stacked one above the other. For instance, you may have a table for the header of your site, a table for the body, and a table for the footer.
What are nested tables?
Nested tables are tables within tables. This should be used sparingly. Nesting tables beyond two or three deep generates copious amounts of HTML code, making the web page slow to load and HTML troubleshooting very difficult.
What is the best way to set table attributes such as width and height?
Always set table and cell widths in Dreamweaver's Properties Inspector or the appropriate FrontPage dialog box. Never drag table or cell walls. This can mess up table math. It is not necessary to set table or cell heights. Netscape cannot read that attribute.
Design Issues
How do I get my page to fill the whole monitor screen and how do I get my page to shrink and expand with different resolutions?
This is what is commonly referred to as liquid design. It is achieved by setting table widths with percentages rather than pixels. A table set 100% wide will fill the monitor screen width regardless of resolution. A table set 90% wide will fill 90% of the width of the space, etc. This applies to any space wherein a table resides, whether it be a web page or another table's cell (nesting).
Can I mix pixel widths and percentages for my table's cell widths?
Yes. This is appropriate when static columns are needed for a navigation bar, a gutter between columns of text, or various other applications. Keep in mind that at least one column in the table must have a width set with percentages. The percentage widths in each row must add up to equal 100% even if the table width is set at less than 100%.
How wide can I make my site so it is viewable at all resolutions with no side-to-side scroll?
To accommodate 800x600, the design should be approximately 770 pixels wide. Even if you are using liquid design or percentages for your widths, remember that the content, such as images, in each row, cannot exceed combined widths of approximately 770 pixels.
If monitor resolution is set at 800 pixels wide, why design at a width of 760?
We have to allow for the edges of the browser and the scroll bar.
Which are better, liquid or static designs?
Neither. There are uses for both. First consideration is individual taste. Many do not like the appearance of static sites that appear narrow with lots of page background showing at small resolutions. Another consideration is the amount of content to be placed in a website. If the pages will have a small amount of content, they could look bare and incomplete at small resolutions sitting in tables set at 100%.
Cross-browser Compatibility Issues
Why do my tables look different in different browsers?
Different browsers read code differently. This applies to tables, too. Be sure to test in at least IE and Firefox, and preferrably a third browser as well.
