Home > Help
files >>
Using tables FAQ
Using tables FAQ
General
- What are 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.
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
|
