Home

1. Introduction

2. Basics review

3. WIDTH

4. VALIGN

5. BORDER

6. BGCOLOR

7. CELLSPACING

8. CELLPADDING

9. ALIGN

10. Table manners

11. Editors

12. Summary

13. Exercises



Classes home

HTML Info home

 

Table Manners

So now you know some of the code variations for tables, and you've got some hot design ideas a-brewin'. Here are some technical caveats to keep in mind:

1. Be careful with tables with absolute measurements over 610 or so pixels wide - they won't display fully on everyone's browser.  Special caveat: if you're using a visual editor, check your code every now and then - editors are famous for chaning relative coding to absolute.

2. If you want your table centered, use <CENTER> tags, in addition to whatever else your editor assigns.  <CENTER> is officially declared on the way out, but it's still the only reliable table centering command in the code.

3. Nested tables are o.k., but try not to use them a lot.  The browser can't render the outside table until it reads the inner table completely.

4. Putting your whole page into a table will cause nothing to load until everything has downloaded.  This page is like this, but it's also has a pretty low download total.  With one big graphic, it would be a much worse load.

5. Tables print oddly, especially in 3-level browsers.  If you have something like a handout that you really need to print well, try to avoid using tables.

6. Tricks to load empty cells and control vertical space include

<br> tags (Navigator ignores treats cells with <P> tags as empty

&nbrsp; (code for non-breaking space)

<pre></pre> codes, with any spaces and line breaks in between

transparent GIFs

7. Be aware that Navigator 3 has table bugs for advanced designs

Very generally speaking, NN3 doesn't consistently render pages as text on top of tables on top of the background. Results include

Forms in NN3 laid out in tables can disappear

Colored tables can let the background bleed through

Javascripts require careful placement