Cells Too Narrow - Page 2
March 4, 2002
A cell with too little content can also cause problems, and this
applies whether widths are specified in percentages or in
pixels. If you're using pixels, you can try specifying the cell
width for that specific cell - it will often be the solution.
Otherwise you need to add more content to the cell, or to
another cell in the same column. You can add non-breaking spaces
( ) or better still a blank gif image, which is simply a
transparent gif, usually created at 1 x 1 pixels and then
expanded to fit any space using the width and height attributes
of the image tag.
Watch out for double-decking, when the browser splits the cell
content into two lines, and so wrecks your vertical alignment
without solving your width issues. Sometimes you can get around
this by adding the spacer gif to a different row, not the actual
row causing the problem. More details follow in a later section.
Netscape Fails to Show a Cell
An empty column won't show up in Netscape 4. It will disappear.
The solutions are the same as for narrow cells, as described
above. A blank gif is the best option because you get full
control over its size.
Netscape Busts the Page
Suddenly your page is far wider than you ever intended, and in
Netscape 4 half of it disappears off the edge of the screen or
appears lower down as an extra row.
This is a tricky issue, but the usual problem is that you've
specified a "wild card" column with its <TD> set
at 100% width, alongside other columns with specified widths in
pixels, all within a table that also has a specified width,
probably 100%. Explorer does its best to deal with this, but
Navigator tries to give the 100% width column the same width as
the entire window. You may be able to get around this by leaving
out the table width, which will default to 100%. But it's a
bodge, and you will certainly need graphics or spacer gifs
within the other columns, otherwise they'll get squeezed.
Apart from this bodge, there are no decent cross-browser methods
for specifying "wild card" columns in a table, to make one
column change width for different sized windows while the other
columns stay the same. It's time to start nesting tables, with
one table of a specified pixel width within another that's 100%
wide, and the difference between the two producing your
adaptable column. Put a spacer gif in this variable column to
ensure it finishes up with some kind of minimum width.
You can get similar problems in Netscape when nesting tables if
you give one of the inside tables 100% width, alongside other
columns within the bigger table. Again, the likely solution is
to leave out the table width, which should default to 100%.
Unwanted Line Breaks Inside a Cell
This problem happens when the content of a cell takes up to two
lines when it should only take up one. If the break occurs
between two words, you can try joining them with a non-breaking
space ( ) rather than a standard space, but often this
isn't where the difficulty lies. Many times the line break comes
at the end of the cell, after the actual content. It looks like
there's a single line break in there, a <BR>, but when you
check the HTML code, there isn't one.
This problem is usually down to a carriage return in your HTML
code, between the content of your cell and the closing
</TD> tag. For some unknown reason, browsers interpret
this as permission to add a single carriage return, the
equivalent of <BR>, to the cell content, if they feel in
that kind of mood.
The solution is to make sure the </TD> tag is at the end
of the content line in your source code, not on a separate line.
It's easy to do on static pages but can cause headaches on
dynamic pages, where the content might be decided by an If
clause that requires more than one line. You may have to create
a variable and fill it with the content, then just show the
variable in the cell with </TD> immediately following.
If you can't get rid of the line break any other way, you can
add a spacer gif to another cell in the same column to force a
suitable width, but it's another programming bodge.
Specifying Table and Row Heights
There isn't a lot to be said about this. It's outside HTML
specifications and will show up as an error on an HTML
validator, but it generally works just fine. You'll find the
height attribute used on plenty of professional sites.
Table Backgrounds
Inserting images as backgrounds in tables isn't popular. You
come up against the age-old problem that Navigator and Explorer
interpret the background images in different ways. Many wannabe
designers have tried to incorporate background images in tables,
and fouled it up - in fact so many that hardly anybody bothers
to attempt it these days.
Background colors, on the other hand, are very common - and very
useful, too. Cell colors, row colors, and especially table
colors. Let's look at a couple of table color examples.
Advanced HTML Tables
Tables as Lines - Page 3
|
