Toby said:
Top 10 reasons for not using layout tables:
10. You don't want to upset Brucie.
Is that why the name changed from David Banner in the TV series to Bruce
Banner in the movie? "... don't make me angry... you wouldn't like me when I'm
angry..."
9. Layout is a presentation matter. HTML (and thus the <table> tag!)
is designed for marking up a document's structure -- not for
specifying how it looks.
All HTML has default layout. Block-level elements are laid out down the
screen. Inline elements go across the screen & wrap. Tables are different in
degree, but not different in kind. Just another way of laying things out on a
page/screen. Think of HTML as default layout, then CSS as (optional)
modification to the default layout.
I think some uses of simple layout tables are where you actually would rather
have separate documents, if only frames & iframes worked better. It would be
better not to download standard banner & site navigation stuff each time. The
tables is used to position stuff that would be better in (say) 4 or 5
documents. Instead the table has (say) 4 or 5 cells, each of which is the
equivalent of a document body.
8. Tables can introduce accessibility problems (although these are
often overstated!)
Indeed. And so can other techniques. Yesterday's report from the Disability
Rights Commission didn't list tables among their problems.
Disability Rights Commission news item:
http://www.drc-gb.org/newsroom/newsdetails.asp?id=633§ion=1
Report at:
http://www.drc-gb.org/publicationsandreports/report.asp
7. As with all things CSS, it is useful to have all your styling in
one place so if you want to, say, move your navigation bar from the
right to the left, you don't need to edit 100 different HTML files:
just one CSS file.
There are author-side techniuqes, such as templates. There are server-side
techniques, such as includes and scripts. And there are client-side
techniques, such as script & CSS.
Here is a page that uses a simple layout table to put the navigation bar on
the right. (I wanted it to work even if CSS was disabled).
http://www.childsupportanalysis.co.uk/
Now here is the same page, except that it points to a different CSS. As you
can see, I used a simple change to the CSS to put the navigation bar on the
left. (I haven't bothered to make it pixel-perfect. It was just a bit of fun!)
http://www.childsupportanalysis.co.uk/reversed.htm
Out of 8KB of CSS, I simply changed the rules:
#maincolumn {
}
#fixedcolumn {
width: 180px;
}
to:
#maincolumn {
display: block;
padding-left: 200px;
}
#fixedcolumn {
display: block;
width: 180px;
position: absolute;
left: 5px;
top: 0;
}
6. As the HTML is simpler, it is easier to read and write.
When I use layout tables, (which I do for perhaps half of my pages), they are
very simple. I have even used a single-cell table! They are typically far
simpler than the corresponding CSS. (I now use valid 4.01 Strict, so my HTML
tends to be easier than most on the web anyway).
But CSS positioning typically requires care with the wrapping, nesting, and
sequencing of the 5 to 10 elements nearest the root. I can get a simple layout
table much easier than I can work out the wrapping, etc, needed.
5. Different style sheets can be provided for different media types
automatically. A page can look great on screen, and great on paper
without the visitor having to follow a link to another page. Then you
can have another style sheet for handhelds so narrow displays get the
benefit of a single column version of a design.
The range of different effects that can be achieved using CSS to control
simple layout tables is massive. Here are some examples, for fun. They are all
based on an identical simple layout table. They are work-in-progress, and very
crude at the moment, but the HTML (4.01 Strict) & CSS validates. exhibit05.htm
doesn't work in IE. (No script).
http://www.barry.pearson.name/articles/table_pages/exhibit04.htm
http://www.barry.pearson.name/articles/table_pages/exhibit05.htm
http://www.barry.pearson.name/articles/table_pages/exhibit07.htm
4. If tables were always used strictly for marking up tabular data, we
would now have some pretty nifty spreadsheet-like features in
browsers -- sort alphabetically by table column, automatic totals of
numeric cell ranges, click on a table cell to highlight the
appropriate row and column headers, etc. I want these features. So
everybody! only use tables for marking up tabular data!
Too late. Perhaps 99% of the pages on the web use layout tables. So what you
want will need to work in spite of them. (I want those things too. Why not
have them added to what we have? Then just avoid using them on layout tables).
3. User agents can cache style sheets, and pages using style sheets
for layout are (in my experience) always smaller then the equivalent
table abuse. This means faster loading pages, and cheaper bandwidth
bills.
I use simple layout tables, when I use them at all. They add approximately 25
bytes per item being positioned. This is typically about 100 bytes per
document.
2. Many browsers wait to download "</table>" before even beginning to
render the table. This can cause delays in rendering pages.
I agree that this is a problem. I sometimes use { table-layout: fixed }, but
that probably doesn't solve the problem in most browsers. But many of my pages
are dominated by images, and the table renders before those anyway.
1. Every time you use a table for layout a puppy dies.
[snip]
Aaaaahh! But at least not cats.
(Have you ever eaten roast guinee pig? Tasty! I've been to several Asian
countries. I wonder if I've ever eaten dog or cat?)