General

- What are tables?
- Why do I need tables?
- What is cell padding?
- What is cell spacing?
- What is a row?
- What is a column?
- What is table stacking?
- What are nested tables?
- What is the best way to set table attributes such as width and height?

Design Issues

- How do I get my page to fill the whole monitor screen? How do I get my page to shrink and expand with different resolutions?
- Can I mix pixel widths and percentages for my table's cell widths?
- How wide can I make my site so it is viewable at all resolutions with no side-to-side scroll?
- How wide can I make my site so it works well at 800x600?
- If a monitor is set at 800 pixels wide, why design at a width of 760?
- Which are better, liquid or static designs?

Cross-browser Compatibility Issues

- Why do my tables look different in Internet Explorer (IE) and Netscape?
- Some of my cells are missing in Netscape. What happened to them?
- Where is my cell background in Netscape?
- I want my cells to be a certain height. They are squished in Netscape. Why?
- What happened to my borders in Netscape?
- Are there compatibility issues with table background colors?
- Are there compatibility issues with table or cell background images?

General

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.

Why do I need tables?
Using tables to position content is the only cross-browser compatible method we have at this time. Absolute positioning and layers are not compatible alternatives, yet. Using them will cause the content of your page to be scrambled in some major browsers.

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 can work well if 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.

- Back to top

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 640x480, the design should be approximately 595 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 595 pixels.

How wide can I make my site so it works well at 800x600?
You should not exceed row widths of 760 pixels to accommodate a resolution of 800x600. By the way, most Internet visitors have their monitors set at 800x600.

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%.

- Back to top

Cross-browser Compatibility Issues

Why do my tables look different in Internet Explorer (IE) and Netscape?
Different browsers read code differently. This applies to tables, too. Be sure to test in at least IE and Netscape, and preferrably a third browser as well.

Some of my cells are missing in Netscape. What happened to them?
Netscape requires content of some sort to reside in each row and column. If left empty, they will collapse. The fix is to insert a clear or transparent 1x1 pixel .gif into a cell. Set its width to hold a column's width. If you want the column to be 10 pixels wide, assign a width of 10 pixels to the .gif. It can remain one pixel in height. Change the .gif's height to make a row as tall as you need. It need not be wider than one pixel.

Where is my cell background in Netscape?
For a background to show in Netscape, there must be some kind of content in a cell. A 1x1 pixel clear .gif will suffice.

I want my cells to be a certain height. They are squished in Netscape. Why?
Netscape does not read the height attribute. You will need to place a clear or transparent .gif image into each row to hold them open to a certain height. Generally, it is best to let content hold cells open to the appropriate height. This allows them to adjust with different monitor resolutions.

What happened to my borders in Netscape?
Netscape does not read border code the same way IE does. The work around is to nest two tables so the look is consistent between browsers. See a tutorial here for step-by-step instructions.

Are there compatibility issues with table background colors?
Yes. Below are two screen shots of the same table; three rows, three columns. The table background is set with a dark blue. The center cell background is orange and the bottom row of cells is gray. Cell spacing is set at two.

Internet Explorer 5.0

Netscape 4.7 and 6.1

Are there compatibility issues with table or cell background images?
Yes. Netscape will repeat the image in every cell of the table. You can find a work-around here.

- Back to top