Forum Moderators: mack
I've been casually interested in creating web-sites for about six months now and i've manged to put together a couple. I have used Dreamweaver, Frontpage, and just Notepad and always used tables to structure my pages but I have been 'heard' murmors over the net that this is a bad idea. I'm not sure why.
Are layers much better?
I am a Phd student (philosophy) and my site(s) are/will be [free] information sites on particular areas of philosophy.
Any help appreciated,
HarlsenC.
Tables vs. tableless design is a hot topic with loads of discussions (or flame wars [webmasterworld.com]) going on. There are proponents of old-style nested-tables layouts which work well in old and new browsers, and CSS enthusiasts which consider using tables for layouts as the eighth deadly sin. Both are wrong, of course, but both have their valid arguments. It's a philosophical argument as much as anything - structuralists vs. presentationalists - so you'll be on familiar ground here! Try this article [alistapart.com], which talks about it.
Most people (and web designers) take a middle road - light tables if neccessary are a useful layout tool, you should validate your HTML, keep things clean and simple. CSS is a wonderful tool, but not a panacea.
The markup is just a tool - people are what are important when building your site. Make it easy to use, uncluttered, fast and accessible, and use all the tools you need to get the job done.
tables were intially designed to contain tabulated data. Not as a presentation device - but then i know you know that ;) And I am a keen advocate of tabular design style - but I thought I'd mention it.
ta
Limbo
</added>
Philosophically speaking nothing is ever black and white anyway!
</added>
HarlsenC
file size...doing a layout with divs and css is just much more efficient...typically a third or a quarter of the size...this improves the signal to noise ration which helps with search engines and it also allows you to use space and bandwidth more effectively
ease of updating...having all the layout in an extrenal text file and sensible names for the css classes means you can alter aspects of the site far more easily even if you don't have access to Dreamweaver or whatever at the time
Basically if you use tables to define your layout then you have mixed the structure and content of the site together. So if you decide at some future date that you'd like to change that layout you will have to go back and alter all your html pages.
But if you use a CSS based layout then you can change the entire layout of your site whenever you like by altering one css file.
Some people regard this as important benefit - while others prefer to stick with what they know and use tables.
There was actually a fairly reasonable discussion about it in the CSS forum recently: why tables rule [webmasterworld.com]; where both camps made some good points without it turning into a handbag fight.
But if you use a CSS based layout then you can change the entire layout of your site whenever you like by altering one css file.
But it's also very important to realize that this flexibility is not free, it comes at a cost, and the cost is display stability, especially cross os/browser.
That's why encyclo's advice is what most professionally done sites do, a basic table for layout, and increasing amounts of css for formatting.
As CSS gets more mature, we will be able to use more techniques. The more CSS you use on your site for its construction, the higher the odds that your display will fail on at least one reasonably modern browser.
This means you have to do many many times more testing in css layouts, that's another reason they aren't used much commercially. Blaming layout failure on bad browsers does your users no good at all.
But it's also very important to realize that this flexibility is not free, it comes at a cost, and the cost is display stability, especially cross os/browser.
Yes, but if more than 95% of your visitors use IE/Windows, it's tempting to construct pages with that browser/OS in mind.
Are layers much better?
Just FYI, as far as I know "layers" is a proprietary term and is not standard terminology. It refers to either a long-deprecated Netscape layout device, or a term used by some WYSIWYG design tool, presumably one of the ones you mentioned.
One other thing, in terms of speed, on a large page even if file size is identical, a CSS layout will show content faster, especially on older browsers.
One other thing, in terms of speed, on a large page even if file size is identical, a CSS layout will show content faster, especially on older browsers.
I read this claim here repeatedly, I assume you mean a div layout. I tested this, made an XHTML 1 strict site, basic table structure, div substructure, full CSS. Page loading time, over dialup, about 4 seconds, for first page. Once CSS is loaded and cached, slightly under 1 second per page. 1 second per page over dialup is as fast as I've ever seen any page anywhere load.
While it is true that the table has to receive its full contents before rendering, I've found that while a div site will generally display the first part pretty fast, say the header, it takes as long or longer for the whole page to render, mainly because you're forcing the browser to actually construct the page using all the CSS commands you've fed it. Sort of the difference between using javascript and C++, table support is hardcoded into the browser, that gives you an intrinsic rendering speed advantage from what I can see.
In both cases, div and table, the CSS has to load before the page renders, I just made a full positioned div site with all the bells and whistles, it is far more sluggish on older pc's than my table site.
Yes, but if more than 95% of your visitors use IE/Windows, it's tempting to construct pages with that browser/OS in mind.
Tell me about it, personally I can't stand the w3c box model, when I want a 120 px wide div, with padding and borders, I don't want to do some math to make it work. I wish they had used the IE box model, it makes much more intuitive sense, but too late for that now.
If I were to develop in IE, and only worry about IE users, my development time on any project would be radically less. Same can be said for new Mozilla browsers, of course. Foolishly though I want everyone to have a nice experience on the page, mac users, linux users, windows users.
The rejoinder is that a split tabular layout can achieve the same thing. That's true enough.
I usually use CSS, but I'm not a zealot about it. Sometimes the advantage seems small considering the work it can take to sort out all the issues. On the other hand, I'm probably more comfortable with CSS than with tables now and I just find the forest of <td> tags dizzying. That's not a recommendation, just a comment.
Tom
whereas a huge and complicated table can take a while over a slow connection before it has enough info to start rendering.
I make the same mistake posting here too, I'm loose with my wording, to a fault.
I'm comfortable with CSS styling tables, text, divs, but once things are getting positioned, I start seeing serious bugs, I realized a while ago that CSS is for styling first, this positioning thing has so many drawbacks in terms of page rendering, you have to think much more about what is happening on the page in terms of text, it's a lot harder, all I use it for is floating stuff here and there, creating divisions (div) in the text flow, and even then I get a call, oh, this box is under the content in Mac IE 5x because it won't right float correctly.
But I'm not talking about huge complicated tables, I'm talking about this:
<table>
<tr>
<td id="header" colspan="2">
</tr>
<tr>
<td id="leftnav">nav stuff, divs, etc.</td>
<td id="content">content, data divs, floats, etc</td>
</tr>
</table>
For some reason when I say tables, people seem to think of <font> tags, 4 times nested tables, etc, the abused table, that is.
To me the question is really, if someone wants a nice simple website, why would I not use a table like the above? If I were to make that with divs, it would only be to prove some point or other, and would be less stable.
One of my favorite postings here was by purplemartin, he suggested this simple formula: If you are making a layout that uses a table structure, that's a connected group of cells, use a table. If you are making a layout with stuff popped all over, use divs. This is sensible, easy, and logical, and avoids this whole debate completely by returning common sense to the discussion.
Sometimes the advantage seems small considering the work it can take to sort out all the issues.
That is the point, it's something that is just completely ignored in most of these discussions, the time it takes.
Sometimes when I want to test some idea or question somebody asks, I whip out my text editor and create a fully functioning table structure like the above, takes maybe 5 minutes. Divs never work like that, unless all you are doing is stacking them on top of each other, which from what I can tell is how they were designed to act, since it's the only behavior they default to, like p tags.
tables were intially designed to contain tabulated data. Not as a presentation device
From the HTML4.01 appendices:
"The HTML table model has evolved from studies of existing SGML tables models, the treatment of tables in common word processing packages, and a wide range of tabular layout techniques in magazines, books and other paper-based documents."
I tried to resist posting this (again) but this "tables were only designed for tabular data" myth really should be laid to rest...
BTW I'm in the encyclo/isitreal pragmatic design posse :)
but this "tables were only designed for tabular data" myth really should be laid to rest...
Thanks for the 4.01 definition, that figures. But tables being FOR 'tabular data' is what you are left with once you get rid of all the other table myths, such as slow loading times etc.
When you put your HTML data (what's between the tags, that is) inside table tags the data, being contained in a table, is now happily tabular data, by definition. Your quote indicates that the W3C was completely aware of this fact when they wrote that.
The real question I have is why someone would waste so much time trying to duplicate an existing tag's functionality when that tag already does it all so well, it lays out the data in a linear fashion, it degrades pretty well in small screen environments, it needs a lot less CSS to make it run, and when it does run, it runs a lot more stably for the desired structure cross browser, and needs a whole lot less debugging when used to create a grid type layout, such as the ones recently discussed here [webmasterworld.com...]
with excellent points raised by bird and bedlam.
