What is Digg?Sponsored by Activision
Introducing DJ Hero Game view!
djhero.com - Scratch and mix 102 songs in 93 original mixes from today's hottest artists. Available Now.
44 Comments
- inactive, on 10/12/2007, -1/+17Tables are meant for tabular data. So, if you're trying to display data (i.e. columns with rows), tables are what you want. If you're trying to display a site layout, divs and spans work better: generally less code, renders _alot_ faster (unless width/height defined, render engines have to wait until content is loaded to determine size of table), and screen readers can read your content easier and more accurately (this is a good thing).
- bpapa, on 10/12/2007, -7/+19Everytime a web developer uses a table for layout, a kitten masturbates. Or something like that.
- Bogtha, on 10/12/2007, -0/+11> Yeah. Divs are better for layouts in general - it's much more versatile.
<div>s do *nothing at all* in terms of layouts. They are no more or less versatile than <table>.
The whole point of CSS is so you can use the most accurate HTML elements to describe the information. <div> elements are a last resort when no other element type fits the bill.
It is not <table>s versus <div>s. It is <table>s versus whatever element type most accurately describes the information. Sometimes that's <ul>, sometimes that's <p>, sometimes that's <table> and very rarely, when you can't find anything better to use, it is <div>.
Anybody describing layout in terms of <div>s has as much to learn as somebody using tables for layout. It's the exact same misconception. - yongfookathome, on 10/12/2007, -0/+7"The problem is making a web page match the silly little design. BUT WHO CARES ABOUT THE DESIGN!?!?"
Clients care quite significantly about the design. - Bogtha, on 10/12/2007, -0/+7My now standard W3Schools comment:
The comments attached to this weblog post are a good indication of the quality of the material that W3Schools provides:
http://weblogs.mozillazine.org/doron/archives/2005/05/w3schools.html
"the site's content itself is highly IE centric"
"It took me a couple of months of correspondance to get them to make a few simple changes to give their SVG (and any SVG written by their readers) a half chance of working in Moz."
"w3schools is a very lacking site."
"They don't even test their simple code samples."
"What good is a school that teaches the wrong content?"
You should also be aware that they have no connection to the W3C, althought they do a good job in convincing newbies otherwise - the choice of name, displaying W3C logos at the bottom of their pages, etc. Sleazy. - Ryan001, on 10/12/2007, -0/+7bpapa- "BUT WHO CARES ABOUT THE DESIGN!?"
Utterly fruitless rhetoric. The people who care about the design are the ones' that write my checks. - armbar, on 10/12/2007, -2/+8If only more articles like this were around back in 1999...
This should be the very first thing anyone wanting to be a web developer should read. Not the thick HTML book. Not the articles about CSS typography, or how to create a blog. Web standards are the key to your success as a developer. They will save you time, problems, and the hassle of more workarounds than are necessary. - av4rice, on 10/12/2007, -0/+3I agree that #9 isn't really accurate.
Yes, lots of us use hacks. But personally (and I think many do the same), I use hacks GRUDGINGLY because we have no choice but to accomodate Internet Crapsplorer which, no matter how much you believe in standards, still makes up the majority of your audience. In a perfect world, yes, I would never use CSS "hacks". I use them now because a certain idiot piece of software won't work otherwise, but with the hope that someday I can get rid of them for good. Abandoning such hacks is a good idea in principle, of course, but asking us to do so right now in practice is simply not feasible. More hope to come when IE7 is out of beta... or when everyone switches to Firefox or something. - Ensnared, on 10/12/2007, -0/+3It's also dead wrong because the alt-parameter is required in img-tags if you want the page to validate. Since the author of the article claims it's unecessary, he obviously doesn't care about wether the page validates or not, which doesn't really put him in any position to talk about how people should use web standards.
- heretic24, on 10/12/2007, -0/+3This actually has very little to do with web *standards*, and many of the "misunderstandings" either aren't, among serious developers, or are really odd and trivial.
-- "We need separate print pages" -- who thinks that, in 2006?
-- "We Need an Alternative Mobile Web on Top of the Existing Desktop Web" -- who thinks that, in 2006?
-- "Accessibility Means to Always Use Alt Text" -- this is just petty beyond belief and doesn't acknowledge that img alt tags are read/displayed/rendered/interpreted *differently* by most user agents than is plain text.
-- "Sites Always Become More Accessible With CSS" -- who *ever* thought that? CSS *can* be a great way to improve accessibility, because, inter alia, well-implemented div-based layout is more accessible than table spaghetti code. So ... what's the misunderstanding again?
-- "The Semantic Web is Just Around the Corner" -- if you think this is a common misunderstanding or a relevant one then ... you're high.
-- "CSS Hacks Are Always Superior". You really are high. I have *never*, ever, ever, ever seen anyone seriously suggest that CSS hacks are anything *other* than a necessary evil. No-one enjoys dealing with cross-browser bugginess and inconsistency. No-one. - cazabam, on 10/12/2007, -1/+3Bogtha said "Anybody describing layout in terms of <div>s has as much to learn as somebody using tables for layout. It's the exact same misconception."
Hmmm ... see, <div> stands for 'division'. I use them to 'divide' my header from my body text from left navigation menu. I use them to 'divide' individual stories or groups of other tags. I use <p> for paragraphs, <span> for small bits of text, <h*> for the various levels of the page, sure, but if I want to group a bunch of tags together for some reason (say, to draw a box round them, or make them roll up when somebody clicks a 'bury' button) then that is _exactly_ what a <div> is for. - farr, on 10/12/2007, -0/+2@ bpapa
But the designer will know, and toss and turn late at night, worrying about that blue part. =P
Seriously though, I think most people use the hacks only when the layout is *broken*, not just slightly off. And I would say to you, design does matter... even if newspapers seem austere and completely vanilla to you, there are design reasons that go into the column widths, font selection, and everything else. - jtrost, on 10/12/2007, -1/+3Misunderstanding #3: "Accessibility Means to Always Use Alt Text"
This is dead wrong. Images always need alt text because if they don't have alt text the screen readers will read the image name. What's more descriptive, an image name, or a sentence describing what the image is about? - Kazrog, on 10/12/2007, -3/+5shortkidd - yeah, that's what they'd have you believe. In practice I've found it to be less cut-and-dry though.
- Bogtha, on 10/12/2007, -0/+2> Hmmm ... see, <div> stands for 'division'. I use them to 'divide' my header from my body text from left navigation menu.
If you are using a <div> element for a header, then you are using the wrong element type. Use <h1>. Aural browsers understand that. Text-only browsers understand that. Search engines understand that. Browser extensions that give outlines for pages understand that. But none of them can do anything useful with <div> because you are using the wrong element type. Just like table layout people do. It's the same with navigation menus. They are just lists of links. Use list elements. - ThankTheCheese, on 10/12/2007, -0/+2will your high-profile clients still be thanking you when they get sued for Section 508/DDA breaches?
Target Co. will tell you all about it. And SOCOG. - Philipp_Lenssen, on 10/12/2007, -0/+2I didn't say to not use the alt attribute. I always do, for starters, the page won't otherwise validate, and I use XHTML1 Strict on my pages. I said you don't need to use *alt-text* -- that is, use empty alt-text -- as user agents can understand this. E.g. Lynx will not write [image] when you use empty alt-text.
- silenceHR, on 10/12/2007, -0/+2i knew this guy will be burried by CSS zealots..... seems like can't even mention word table without being dugg down
- kefs, on 10/12/2007, -0/+2@badfeng
Are these high-profile clients also equal-opportunity employers? If so, do your sites work for all of their employees? Even those with disabilities? - farr, on 10/12/2007, -0/+1@ Bogtha
Hmm, thats an interesting link, but I never really saw any issues like that, though I admit I've only referenced the xhtml and css sections. I just found it to be a good "desk reference" type site, and a few people have told me they've learned from it. Maybe I can find something up to a higher standard next time though, I too thought w3schools was affiliated or the official learning page of w3c. - burke, on 10/12/2007, -1/+2huh. I didn't know about the g-z backslash hack. Very interesting, I'll have to read more about that.
- Cannon13, on 10/12/2007, -0/+1#5 is skewed as well. When implemented properly, Css DOES separate content from style. Just because his layouts don't work in IE doesn't mean that div's are bad. He also makes the generalization that web standards sites are all like the CSS Zen Garden, which is a terrible misconception.
- kefs, on 10/12/2007, -0/+1@Bogtha
I think i'll help in your crusade. - badfeng, on 10/12/2007, -2/+3Tables are fine. I do work for some fairly high-profile clients and what they care about it that their site works. I use CSS for what it's good for and tables for what they are good for. I appreciate the idealistic zeal of CSS purists, but it seems to me many of them are theorists that could spend their time better actually delivering product.
- farr, on 10/12/2007, -8/+9More like "9 Blanket Statements That Are Purely My Smug Opinion".
There's much better places to learn about web standards, without the attitude:
http://w3schools.com
http://www.alvit.de/handbook/ - kypen, on 10/12/2007, -0/+1I respectfully disagree with the hacks comment. While they MAY create problems with new browsers, they are often necessary for changes to a design over which you have no control. I work for a University doing web design and content management, and often have to do some additional CSS on top of the current design, which I have no control over and can't change. I often have to use hacks because a CSS change on a single page will ruin other parts of the page that aren't even in the content I'm changing, such as the header, navigation boxes, etc.
Long story short, hacks are very necessary in today's web browsers where they all handle styling differently. Once IE7 starts handling CSS2 (in 2043) properly, them maybe things will start taking a turn for the better. - JamesGlover, on 10/12/2007, -0/+1I don't understand #2. The issue isn't with web developers but with mobile devices. Older phones or cheaper models can ONLY display mobile specific content as they cannot render HTML or XHTML. Is your service is likely to be used on the move (Such as train time tables) then you need a mobile specific service.
- inactive, on 10/12/2007, -0/+1I was wondering why people modded you down because tables (in mininal) can actually be used to logically partition DIVs and SPANS and tidy up the HTML code. The reason why you got modden down is in the last part of your comment.
- Vinvin, on 10/12/2007, -0/+1Plus, without an Alt text the HTML is invalid, which forces you to think of a descriptive one. I'm not so satisfied. There are a few unnecessary ones, e.g. #7 and #8, because what mistakes would you make from these misunderstandings? And who actually thinks this? I can only whole-heartedly agree with #9, but that's about all.
Of course, my opinion is superior ;) - ThankTheCheese, on 10/12/2007, -0/+1you've missed the reason why tables shouldn't be used for layout in the first place, though. The reason layout tables are bad is because they often do not linearise properly. That is, the order in which they are supposed to be read is not the order in which the content appears in the HTML. This causes many problems with screen readers.
if the W3 introducted a layout tag like that it would completely go against the reason why they have been pushing for DIVs in the first place.
It sounds like you're stuck with the "table logic". DIVs require a different way of thinking, you need to forget everything you know about HTML layout to fully appreciate CSS layout. - CaughtThinking, on 10/12/2007, -1/+1What w3 needs to add is a "layout" tag that acts like table with "row" and "column" and "heading"
- jbond, on 10/12/2007, -1/+1Misunderstanding #11. CSS can do anything Tables can do. I've seen huge numbers of attempts to replicate the old Slashdot header, 3 columns, footer layout. People go to extraordinary lengths to hack CSS in the attempt. Guess what. None of them work. All of them have some limitation whether it's browser support or non-graceful failures when the content is slightly awkward. Now arguably table support in the major browsers is more resilient. But mostly the CSS block model just doesn't replicate everything we can do with Tables.
- cazabam, on 10/12/2007, -0/+0I thnk the point about CSS hacks may have been more geared to a certain type of designer I have had the misfortune to work with in the past. This is the type that uses CSS hacks INSTEAD of the right way to do it, even when the right way to do it works fine, because it's "cleverer". This is true all over the web development world. If I had a penny for every time I saw a PHP hack being used because the developer thought he was being clever, but then breaks the site when PHP is upgraded, I would have enough to buy a small island*.
* a very, very small island - cazabam, on 10/12/2007, -0/+0I agree that w3schools is a good place to learn about the mechanics of building HTML, CSS or whatever. However, the original article was talking about mistakes *attitudes* rather than incorrect understanding of how the technology works. The attitude that adding alt tags is sufficient for usability, or that using CSS hacks is a good way to build sites, are attitude problems that sites such as w3schools don't cover. People generally have to learn it the hard way.
- Haplo, on 10/12/2007, -1/+1Misunderstanding #0: HTML and CSS are *no* standards.
- thefrenzy, on 10/12/2007, -0/+0As far as using Explorer only hacks goes ----- don't ---- it's a dumb idea that will bite you in the ass when you have to update thousands of sites upon the release of version 7.
If you have to deal with inconsistenties between explorer and every other browser then use conditional statements (see here: http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp).
Conditional statements are actually valid normal html comments, but explorer interprets them and if necessary what is in them if it's the correct version to. So you can say, every version of explorer up until version 6 use this secondary stylesheet that overrides some styles in the first that will cause layout breakage on explorer.
As far as the "a class for everthing" argument (point number 5), it's good practice IMHO to give every major element its own ID. This helps readability and maintainability of the code - at first glance all lists look pretty much alike, however, one with a class of sideNav and one with a class of topNav makes it immediately apparent which is which. - wirjo, on 10/12/2007, -3/+2Yeah. Divs are better for layouts in general - it's much more versatile.
- cazabam, on 10/12/2007, -1/+0-- grr, I didn't make a new thread - I clicked reply --
AJAX is great, isn't it ... except when it doesn't work. A full page refresh might look ugly but at least you are co-ordingating a million tiny bits of code all over the place. - Gyga, on 10/12/2007, -2/+1"Tables are still useful, and in many cases create less markup, than using a purely div and span based layout, when used with intelligent CSS practices. Everyone is so proud of their table-free layouts but ultimately they are limiting themselves and forcing divs, spans, and uls to be used in ways they are not strong at, particularly if one cares about supporting MSIE (hey, they still have 85% market share... somehow...)"
This table layout
<table width="100%">
<tr><th id="header" colspan="3">Header</th></tr>
<tr>
<td id="left">Left</td>
<td id="center">Content</td>
<td id="right">Right</td>
</tr>
<tr><td id="bottom" colspan="3">Footer</td></tr>
</table>
Vs. this div/css layout which IE can see.
<h1 id="header">Header</h1>
<div id="left">Left</div>
<div id="center">Content</div>
<div id="right">Right</div>
<div id="bottom">Footer</div>
THE CSS for both
#header {float:left;width:100%;text-align:center;margin:0%;padding:0%;}
#left {float:left;width:15%;margin:0%;padding:0%;}
#center {float:left;width:70%;margin:0%;padding:0%;}
#right {float:left;width:15%;margin:0%;padding:0%;}
#bottom {float:left;width:100%;text-align:center;margin:0%;padding:0%;}
Now which would you rather maintain? - Kazrog, on 10/12/2007, -10/+8Excellent post, and I didn't know about !important or the g-z backslash hack. I will add to his list though...
Tables are still useful, and in many cases create less markup, than using a purely div and span based layout, when used with intelligent CSS practices. Everyone is so proud of their table-free layouts but ultimately they are limiting themselves and forcing divs, spans, and uls to be used in ways they are not strong at, particularly if one cares about supporting MSIE (hey, they still have 85% market share... somehow...) - bpapa, on 10/12/2007, -5/+2I never understood the point in hacking the #(@* out of CSS, ESPECIALLY doing so in the past couple of years.
Let's face it. If somebody is using IE as their number 1 browser, I doubt that that type of person is going to care that the blue part of the page is a little off to the left or some nonsense. I mean, to take it further let's face it - who uses websites to look at pretty pictures or pretty layouts? I think a large majority of people use websites because they are bored, because they want information, or because they need access to some sort of service. If something looks a little off, as long as the person is able to do what they need/want to do, I don't see the problem.
The problem is making a web page match the silly little design. BUT WHO CARES ABOUT THE DESIGN!?!? Look at the oldest media around these days, newspapers. They all look like #@*, it's text on some white paper and you get god damn ink all over your fingers.
The solution to the problem is to kill all designers, and all those that think that the actual design of a page means something. - neomatrix, on 10/12/2007, -3/+0Can you Right click -> Lock Tab in Firefox?.... wrong topic sorry
- CaughtThinking, on 10/12/2007, -6/+1There's no such thing as using hacks "grudingly". That's like committing crime "grudgingly". You are either using them or you are not.
- tamzarian, on 10/12/2007, -14/+2wtf? There's no porn on this site either?
© Digg Inc. 2009
— Content created and posted by Digg users is