An an entry level on web development still learning.. I've been using div and mix with table to create columns.
Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. This opened a can of worms for us all. Look at the code below:
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td colspan="3" height="120px">....</td> </tr> <tr> <td class="menu" valign="top">...</td> <td class="content" valign="top">...</td> <td class="aSide" valign="top">...</td> </tr> <tr> <td colspan="3">...</td> </tr>
Now look at the exact same functioning, done with CSS and divs:
<div id="header">...</div> <div id="menu">...</div> <div id="content">...</div> <div id="aSide">...</div> <div id="footer">...</div>
As you can see, not only is using divs much more compact, but it is also more user friendly.More lines of code mean larger file sizes, which mean longer download times. Developers should keep in mind new media, such as mobile devices, which usually have low bandwidth. Websites will have to support media other than traditional monitors in future, and bad code limits the possibilities. A large code base has more bugs than a small one. Developers tend to produce a certain number of bugs per line of code. Because tables increase the code base, such structures likely contain more bugs than layouts with less code lines.
Table layouts are also far more inflexible, take longer to create, and are very hard to update and maintain.
This is why tables should only be used to display simple tabular data.
Divs are semantically correct for laying out content.
Tables should only be used for tabular data - ie data where the rows AND columns relate to each other.
The main reasons are accessibility and code simplicity.
Alex nails it pretty good. My take:
- When creating web interfaces semantics is very important because it keeps your code neat, you need that when adding more layers of advanced interactivity (ie rich media like Flash and DOM-scripts).
- Following the standards where divs are intended for sections on a page and tables are not is important for future-proofing. In time unstandardized pages will risk to crumble to pieces because browsers tend to implement rendering enginges based on open standards like W3Cs.
- It's alot more flexible when used in conjuction with CSS, there is a reason why W3C decided that divs are for sectionalizing content and tables are not.
- Large tables are slower to render by the browser (not a big issue nowadays though...)
Thats some of my thoughts on that.
I started out using tables for layout years ago, but became a huge believer in CSS/Divs for layout.
Drawbacks to using divs: 1. Steeper learning curve: you can teach someone table-based layout in a day, mastering the CSS for divs takes much longer 2. Cross-browser problems: Getting some browsers (especially IE6) to behave takes experience and time
Benefits of Divs:
- More flexible - you can layout the same markup many ways, which means when you have to do a re-branding/update to the site, you may not even have to touch the HTML
- Easier to understand and debug: Having 1 master table for layout is easy to work with, but when you start having to go down to 6 or 7 nested tables to achieve your design, it becomes a nightmare. Everyone who has worked with tables has had the nightmare of tracking down an unclosed tag that breaks the layout somewhere but it's impossible to find easily
- Easier to maintain: With table-based layouts, making a change to the tables means you have to change every single page. Using CSS, you just change the main CSS file, and all pages get the update automatically
- Less code: The more complex your layout, the more tables you have to use. I have converted many sites from table-based layout to Div-based layout, and the pages always come out with a smaller file-size
- More accessible/SEO friendly: Much of your markup is taken by "infrastructure" code in tables. Google only indexes a certain amount of your source, and the farther down the page the actual content is, the less Google has to go on when determining the purpose of the page. Also, with Divs you have much more control of what order the content is in the source, which makes it easier for screen readers to get to the actual content faster.
- Job security: Face it, whether you believe divs are better than tables or not, landing a new job when all you know is table layout is already pretty impossible, and getting harder every day. Make yourself more valuable by learning the ins and outs of CSS layout, and it'll pay off huge later in your career.
I'm a firm believer in the ideal that your markup should do just that, markup and that your presentation should be offloaded to CSS as much as possible. It makes it much easier to maintain and also allows flexibility I don't think you can get as easily with tables.
Just my opinion on that.
There are plenty of things that a table styled layout is great for, things that require hacks and floats and faux backgrounds, and sometimes even js to fix without using tables.
The reason you should not use tables is that it is not semantic - and this is important for several reasons, most already mentioned. One point that might have been treated lightly is that table based layout locks you into a design that can not be altered easily without hacking up the structure of the document.
In the coming years (all new browsers support this, even IE8), you will be able to use display: table and display: table-cell, etc CSS to organize your content as if you were laying them out in tables. This should not be discouraged, as the problem of semantics no longer exists - though many people seem to shy away from this because the words table and layout trigger a reflexive disgust.
If you are interested and/or developing an application with flexible requirements check out http://www.quirksmode.org/css/display.html for a great treatment on the table based display options.
Stepping away from religious wars for a moment, I personally find that Dreamweaver and GoLive sometimes have problems with tables - it seems to raise their bugginess. DIVs seem to work better. For the hand-coder, also, tables are more complex with the need to open and close both rows and cells.
That said, at the current time, it is sometimes VERY hard to "do things right" across browsers, so I'd argue "it depends." I do surveys with tables though they're not really tabular content, because DIVs... would drive me insane. But they're not meant to last for more than 2-3 weeks so I'm not worried about that. (And I do use CSS exclusively to manage appearance.)
Incidentally, you can do a lot with CSS to make life less complex, rather than more complex - but you'll need to do a lot more source-code intervention and not let Dreamweaver or GoLive or whatever do your html thinking. They're not as bad as Microsoft products, but they can make things overly and unnecessarily complex.
I'm firmly in the 'Tables only for tabular data' crowd.
Divs for layout (well, until HTML5 is standard and we get the header and nav elements...).
CSS is truly broken. If you want something to line up properly in every browser, use tables. CSS is mainly for applying styles (fonts, colors, etc.). You can't even center things vertically and horizontally without using hacks.
I would have to disagree with Mr. Zatz on one point. He says in his answer above: "I do use CSS exclusively to manage appearance". But then he says he uses tables for surveys. My guess is that he is using tables to layout his surveys, which would qualify as appearance.