Forum Moderators: open
I'm not ashamed to admit to a fondness of tables for various layout tasks; not for everything, but they do some things you just can't do with css. One of these things is the magical resizing layout.
This is my basic HTML:
<html>
<body>
. <table cellspacing="0" cellpadding="0" border="1" width="100%" height="100%">
. . <tr height="100">
. . . <td>heading</td>
. . </tr>
. . <tr height="30">
. . . <td>menu</td>
. . </tr>
. . <tr>
. . . <td>body</td>
. . </tr>
. . <tr height="20">
. . . <td>footer</td>
. . </tr>
. </table></body>
</html>
Always worked brilliantly, resulting in this sort of thing:
------------------------------
header (fixed height)
------------------------------
menu (fixed height)
------------------------------body (resizes to browser height!1!11)
------------------------------
footer (fixed height, always at bottom of browser!11!)
------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If that line is not in the document, it works fine. But with that line, the table fails to fit itself to 100% height. It simply "collapses" as if my table's "height=100%" is being rudely dismissed.
I've tried everything I can think of, so does anyone here know how to include a DOCTYPE line and retain that height=100% functionality?
Hope someone can help!
<style type="text/css">
html, body {
height:100%;
}
</style>
Using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
makes it work perfectly in both browsers, but limits other things.
I still don't see what's so smart about dropping functionality in the journey to some academic HTML utopia. Why deprecate at all? Especially since CSS still can't touch the flexibility of tables in lots of ways. Can we not love CSS *and* tables?
The issue with your code is probably the way you are assiging the heights, I haven't checked but I'm pretty sure assiging a height to a <tr> is invalid. Try assigning the height to the <td> instead and specify px or a percentage instead of just a number.
As for CSS vs tables.. rant mode on!
1. A grid of figures, rows & cols, all nicely lined up and self-adjusting in CSS? No way jose'.
2. Neatly copy & paste HTML table into Excel/Word - try with CSS, no worky.
3. CSS vertical-align does not achieve what table cells do. Where is real kosher table-like functionality in CSS? Doesn't exist.
4. Why is a nested DIV structure more elegant than a table? I don't see it.
5. Nowdays CSS needs *more* hacking than HTML to work on different browsers.
6. Assuming you don't go nuts with nested tables, there's no speed/bandwidth benefit between the two at all.
7. Even a 50-row "CSS table" takes up more space than a normal table, is harder to maintain and looks terrible in code. And won't work in older browsers.
8. You can iterate through rows & columns in table content using javascript very easily - try it with a "CSS table" and see how complicated and messy it gets. Gotta love those "id" attributes.
9. The more recent a CSS feature, the less audience you're gonna have for whom it works. New isn't always better.
10. If site content is dynamic (as most big ones are), it's easier to code for changing HTML than CSS.
11. HTML is a layout language. Tying CSS to *layout* (as opposed to just visual styles) is counter-intuitive, except where such attributes are used in many places - the aim being to *reduce* coding, not make it more complicated. So far, the CSS junkies just make things more messy.
12. Pure-CSS layouts are all like "yeah, but you only have to change the CSS to change the template". Right, but without CSS you only have to change the HTML... what's the big deal? And the "just change the CSS" thing is a complete myth anyway. In real life, it doesn't work like that.
13. Yhy is 'style="height:30px"' better than simply "height=30"? Call it nitpicking, but the CSS version is longer.
14. Page footers. Nuff said.
15. CSS "front-loads" a site, making a first hit on the site a lot slower - and first impressions are important.
16. Want to change the style sheet? Ring all your visitors - they need to click Reload to bring in the new changes.
17. Table use is only a recommendation, not a requirement, for a AAA accessibility rating.
18. Finally - forms. Since when are floating CSS elements easier, neater and simpler for form field layout than tables?
19. Can't believe I got to 19.
Tables. The ultimate CSS hack.
Don't get me wrong, I love CSS for consolidating visual styles and rendering pages accessible in various viewers PC, PDA, print, whatever. But why *force* people to make a decision between allowing their web page to look the way they want, and being standards-compliant? The Font tag is apparently part of the standard, but no self-respecting coder uses em. So what's the harm? Sure, a 100%-height table might not mean much to a PDA, but dangit this web site of mine isn't for a PDA. Why eliminate functionality? If a PDA is accessing my site, I'll decide what to do at the server-side, as a lot of content is going to be redundant anyway. Many sites do that - it's *eaiser* to do that, than manage redundant layers of style sheets.
So CSS has its place, and it's a big one. But so do tables - they're a tradition! And perfectly valid, just don't go nuts with em. It's all about options and good judgement. At least it should be.
So for now, I'll take quirks-mode browsing any day over strict so-called standards. Partly because quirks-mode is the browser maker catering for how the *community* wants things to work, not the way they or W3C want things to work, and that's an important concept to hold onto. Anyway, it'll be many years before HTML/CSS standards become so. It's not there yet, won't be for a while, so why chase moving goalposts? Go quirks and let em sort out the mess first. Standards will change but quirks will still be there. Adopt new functionality based on your audience, goals and maintainability, not just because someone says it's the "right thing". But hey that's just me all over.. hate being told what to think. :)
Once HTML rendering engines are required to pass some kind of common certification, *then* I'll call it a standard.
rant mode off.
