This question already has answers here:
Closed 13 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
I know everyone is all about DIV's and css and against tables now days, I have always used tables because they are so easy for me to visually see what I am doing while building, I am just now ventruing into the DIV world.
So my question are tables completely replaced by div's generally? I notice on the source of stackoverflow it is mostly DIV's but still uses tables as well, so I am guessing that tables must be used sometimes?
Below is an image of something I am trying to accomplish, most of it is coded but some of it is added in on photoshop, so far I have it all done in div's however what I have is only the background cells which are a list item and the photos, what I am missing from my code is all the text areas and it would be super easy for me to position the text areas within a table cell but since like 80% of the object is done with just css and divs I am not sure if I should just try to finsih it with just div's or if a table inside the comment div's would be the way to go.
I noticed on this page that the ansers are a table inside of a DIV
alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png
To be semantically correct, tables should only used for tabular data and not for laying out a page.
David Dorward brought something to my attention in a comment. According to the HTML 4.01 Specification's section on Tables in HTML Documents:
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Theres a lot of fervent zealotry regarding this notion of semantic content, which is fine and all but the only problem is that it's hopelessly naive.
Fact: there are some things that can be done trivially with tables that either can't be done in "pure" CSS, are extremely difficult in "pure" CSS, have some nasty side effects in "pure" CSS or have serious cross-browser issues.
I did my CSS3 Wish List and in compiling that list I realized some things I've been able to do with tables since HTML 3.2 a decade ago I still can't do with divs.
I'm all for having a semantic layout. Nice ideal. But until it can do everything it's trying to replace then the thing it's trying to replace will have valid use cases.
divs are used instead of tables in most of the sites. But you can use tables in some situations where design using div will be complicated in a cross browser way.
For eg vetical aligning contents inside div will be a big problem as compared to that in table cells.
In this page also you can find table tags being used.
Tables will only be rendered to the screen after all the cells are finished processing.
Take a look at the following questions also.
Why not use tables for layout in HTML?
DIV’s vs Tables or CSS vs. Being Stupid
Yet Another Divs vs Tables Question: Forms
I think a lot of people will argue that "tabular" data, or data that can best be expressed in rows and columns, should be kept in a table, but that divs were invented to replace tables as large layout elements. In my personal opinion, tables were always used as layout elements in a way that went beyond their intended purpose. That's not to say that people don't still misuse divs, for example
<div align="center">To replace a <center> tag</div>
I'd say check out A List Apart, specifically Their section on layout for tips on how to use modern compliant css-based design.
edit : My point was that this is the INCORRECT use of a div tag. In this example, you would use a style such as "text-align:center" or apply that style to the tag itself, but in this case there is no reason to wrap your text in a block-level element, because text by default is inline, so you would be better off with something more like this...
<p class="center">This is a centered paragraph</p>
and then in your stylesheet
.center { text-align:center; }
Thus, the following:
<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>
May be compliant but it looks terrible, and you'd be better off doing :
<table>
<th>
<td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
<td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>
Tables are appropriate for tabular data, but divs + CSS is preferred for general page layout.
http://css-discuss.incutio.com/?page=TablesVsDivs has many good reasons why, as well as some counter arguments.
Like Korey and Thomas said, it's better to use table to represent tabular data.
If you want to make website layout in pure CSS, you can take a look on these CSS frameworks, which ease the task :
http://elements.projectdesigns.org/
http://960.gs/
http://www.blueprintcss.org/
http://elasticss.com/
http://www.yaml.de/en/
http://bluetrip.org/
http://devkick.com/lab/tripoli/
There are a lot of css frameworks out these, just find the one which fit your needs..
Update : Here is a more complete list of css frameworks.
Tables should only be used for tabular data. To figure out if what I am dealing with is tabular I ask myself "would I put this in Excel or Word if it?"
Bill Merikallio & Adam Pratt wrote a funny and informative article Why tables for layout is stupid. They also detail where tables should be used and when.
Tables as means of describing the structure of tabular data have not been replaced.
Tables as means for describing presentation have been replaced, but not with divs. They have been replaced with stylesheets in associate with whatever element best describes the semantics of the content. A div has no semantics associated with it, so it is used if there is nothing better.
It certainly depends. The Golden Rule you must remember is that the XHTML/HTML document file it's meant to describe content and flow.
Everything that is design should be (whenever it's possible, there are some certainly some case scenarios where we can't control it, like when CMS appear on the game) controlled using a CSS file.
Now, how can we reach the most semantically and pragmatical result? As with everything, it depends. Using XHTML/HTML tag elements instead on just relying on for correct content display it's the recommended way.
Notice that I've said tag elements. DIV is just one of them, but just replacing with whenever a or / tags exists is not enough. In fact, that will push you over "divitis" (the useless employ of divs for everything!) and WILL make your job hard. Try checking most tags and use them whenever seems correct.
Sometimes it's a pretty subjective matter as to what qualifies as a content or another tag. Just in this question someone asked if this content would be considered tabulated data (the one that tables are supposed to be used for), but I think that whatever content you must order and filter (and you can copy and paste on Excel without worries) it's worthy material.
Everythin else, it's mostly always just some interesting layout display that should be worked on with CSS and other tags.
Some people will say it's too much work and not worth it. I disagree. Though learning how to work with CSS/divs nuances it's somewhat different at first, you'll soon learn the twist of it.
Good luck and remember that we are always learning new stuff, so don't worry on question everything.
My recommendation would be to really learn HTML. Use the element that actually relates to the content. If it is a list of items, use one of the list tags. If it is data entry, use a fieldset tag. There aren't that many tags to chose from yet so many are neglected. If you simply replace all your table layout formatting with DIVs, your tag soup might be a little less chunky but you can still choke on it.
In terms of performance side, table(s) will only get rendered once the end tag () is reached, so if it is a table contains 100s of rows, you will see that table appears in the browser little later. This is not true for DIVs.
I posted on meta-SO about their tables: https://meta.stackexchange.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547
In short, I think it's fine since it is tabular data.
You should check Elastic CSS Framework you can layout an unlimited combination of columns very easily and position them with its helpers, check out the documentation.
cheers
CSS is great and all, but I mainly use it for styling, not layout. I and countless other developers still use tables every day for building web pages, and will for the foreseeable future.
If you want to use absolute and relative positioning for layouts, go for it. If not, you are not evil or stupid for not doing so. The main thing to look out for when using tables is preventing table nesting hell IMO.
Related
Looking at the CSS Zen Garden, I can see how powerful and convenient it is to separate design and content. The possibilities seem nearly endless. One can change the style sheet and the appearance of the whole site can be drastically altered.
Let's say I'm putting together the HTML part of a website. How do I know where to put divs, where to nest them, etc?
For example, let's say I want to centre something on the screen: I would generally nest 3 divs together: one display:table, one display:table-cell, and one margin-left:auto;margin-right;auto which would have the content.
Let's say I'm just doing the HTML content, but am not thinking about the design at this stage. How would I know that I need to nest together 3 divs if I don't necessarily know I will centre it on the screen?
Or if I have one design now with HTML/CSS and I have my divs and spans all set out, what happens in 18 months if I decide to change the CSS for a completely new layout? Sometimes I will have extra divs and sometimes I won't have enough.
Presumably it would always be better to have more levels than not enough. That way, the worst thing that can happen is that you have a few superfluous divs which aren't styled and have no visible effect.
Is this generally a problem others have? I know CSS Zen Garden is a special case, but would you generally change the HTML code considerably when you change the corresponding CSS?
I've worked in web development for many years, and over here in Reality things are a bit different from Theory: There is no such thing as separation of content and presentation. You'll always end up sliding in additional divs.
You better follow the YAGNI principle. Don't worry about your CSS as you're writing your HTML. Come back later and do the neccessary adjustments.
As for Zen Garden, you'll find a comment in the source code:
This xhtml document is marked up to provide the designer with the maximum possible flexibility. There are more classes and extraneous tags than needed, and in a real world situation, it's more likely that it would be much leaner.
Theoretically, in order to change the style, you wouldn't have to touch the data (HTML). In practice, there are those problems you mentioned.
What I would do is a more-or-less sensible usage of divs (so for example, anything I think that I might want to move around, or any bunch of HTML that I would want to refer to together - would go in a div of its own). Otherwise, don't use too many divs, for reasons such as readability, maintainability, and size of HTML.
Then, whenever you want to change the style, make the minimal addition of divs so that you'll be able to do what you want.
This is a genuine problem with CSS and it was recognised by the authors of CSS3. The most recent published draft (2003) of the CSS Generated and Replaced Content module discusses a pseudo element called ::outside which would have solved the problem you describe. It would, when implemented, for
<div class="mycontent">Some text</div>
have allowed you to write:
div.mycontent { margin-left:auto;margin-right:auto; }
div.mycontent::outside { display:table-cell; }
div.mycontent::outside(2) { display:table; }
Unfortunately, the ::outside pseudo-element never made it into the CSS3 selectors spec, and the next draft (2011) of the CSS Generated and Replaced Content module will not mention the ::outside pseudo-element.
So we're stuck with putting wrapper divs everywhere just in case which as you note, does not allow proper separation of presentation and content, and remains a deeply unsatisfactory situation.
It all depends on how your website is driven. If you are using template files, the amount of updates will be minimal.
You do not want to overload your code with superfluous Divs because a) load time (althought it will be minimal difference in theory) and b) because it will create a lot of confusion when others edit your files.
From your example, it looks like you may be used to table style layouts. Using Divs to contain your layout will make flexibility very easy.
This question already has answers here:
Why not use tables for layout in HTML? [closed]
(66 answers)
Closed 5 years ago.
What is the best practice when building our web page div or table?
Someone says the div is recommended, but I found it is not easy to control the size and alignment with div.
What is your opinion?
It depends entirely on what you're wanting to display:
<DIV> and <SPAN> is for page layout
<Table> is for displaying tabular data (such as data points etc)
The days of using <table> for whole page layouts is gone - and you should be discouraged for using them for this reason.
HTML tags are meant to be semantic. This means describing the data it contains - not how to display it (this is for stylesheets to handle)
There's nothing fundamentally wrong with TABLE - it's just that it was historically overused for the wrong thing. In general, try to use TABLE for true tables of data, use DIV and SPAN for logical block or inline containers of content.
Tables should only be used to display data in a tabular way. For layout and design it is best practise to use divs and stylesheets.
Controlling the divs using stylesheets can take a while if you're not used to it, but it's quite easy to pick up.
You'll be thankful you did it later when the client wants the whole site redesigned and it means you don't have to undo the entire page in order to make the required changes.
First read this: http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
In my opinion (which I'm sure some people will groan about subjective questions being asked on Stack Overflow), but I prefer using div's. A div tag is one tag, a table takes many tags to create a correctly marked-up table element.
A lot of websites in the 1990s were built with tables, but the thinking nowadays in to use divs.
I would say that div is definitely the industry standard for website layouts. They can be quite cumbersome to work with at first but once you get your head around how they are positioned then you will never look at tables again.
Try this tutorial for moving from tables to divs. http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/
Duplicate of:
Why not use tables for layout in HTML?
DIV’s vs Tables or CSS vs. Being Stupid
Theres been a lot of talk lately about rather using div than table tags to make your pages more browser fiendly. Why is div better?
The key point here is using them for layout. There is nothing wrong with tables for tabular data, mind you. That's what they're for.
But when you are using tables for layout you create a very rigid page structure which doesn't usually play well with differing screen sizes, user agents (think mobile browsers or screen readers for blind people. Especially in the latter case you are destroying any order in which the content should be read to the user). Unfortunately tables are still one of the most robust mechanisms to lay out a page, since there are hardly differing implementations and they work for over a decade flawlessly—CSS is an entirely different matter here.
But basically it comes down to this:
Tables
violate the distinction of content and presentation
are unwieldy and unmaintainable in the long run, especially when trying to change the layout of multiple pages in a similar manner
do not have strong semantic meaning, which is important for impaired people who may rely only on read-aloud text. Tables are read here line by line, column by column which is almost always not very helpful in table-based layouts
CSS Layout
is harder to get right (at least for presentation)
allows for (sometimes) clean separation of content and presentation. Note the sometimes as you often have to use multiple container elements in HTML to allow for some layouts and styles to work right since CSS has some limitations
allows for better semantic meaning of the underlying markup iff you don't blindly use <div> and <span>. There are many tags that have a meaning and should be used as such. For example, don't use <div class="heading1"> when you could use <h1>.
a few reasons:
1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is more correct.
2) divs are more flexible and easier to style and maintain. you don't have to write <table><tr><td>Text here</td></tr></table> every time you want to say something when you can just write <div>Text here</div> instead. you can add css hooks (ie, classes or elements) to both tables and divs, but with divs it is infinitely more flexible.
3) table structured sites are just plain ugly :)
Because a table conveys a semantic meaning - being that you're currently displaying tabular data just like h1 means you have a heading. So if you use tables to format your output you are misleading the interpretation of the semantics of your code.
This can for example lead to accessibility issues for people using a screen reader.
Here are the pros & cons of div-based & table-based design.
Using div is better than using table because of easy control of the in the design and it can be container for controls than table and the table is mainlt used to group data with simillar structure so it's design is for this task but div is considered as container mainly than table.
I have found the difference between when gathering many controls and in the i can control the container but in table i got confused because i have to insert inside and its looping inside each other.
most people goes on about how table is supposed to be used for data only and it introduces performance problem when you use it for layout purposes. Also, it is supposed to be more flexible because you can make <div> flow left, flow right and flow everywhere else.
However, IMHO it doesn't worth the effort. Especially when you have columns of controls that are supposed to line up properly with their corresponding labels, it just takes too long to get things to line up properly.
Using tables for layout was revolutionary for web design, but that was fifteen years ago and there was no other alternatives. It's because of this history that tables are even considered for layout today.
CSS based layout is much more flexible than table based layout. There are still a few things that is easier to accomplish with tables, but on the other hand there are a lot of things that is very easy to do with CSS that is very complicated or impossible to do with tables.
I tell you my personal main reasons for using divs:
Tables have just a static grid whereas divs are dynamic:
A table's first row defines all cols (like in MS Excel). In the next rows you just can combine those cols but you can't change the basic layout you have defined within your first row.
Divs are dynamic: you can create a patchwork, letting divs overlap or put some space between. Whatever you want. You are not forced to think in rows. You are free. Much more flexibility.
Tables cause rendering and cross-browser incompatibility problems:
Tables don't look always identical. Each browser gives you its own interpretation of the table and its content. Thus, a lot of uncomfortable surprises. One browser shows you your regular text as bold font. Another browser gives your table more or less margin to other html elements, hence, the tables aren't well positioned. It's hours of work to fix these problems with complicated workarounds. Divs always look the same in all browsers. Even the IE (who is well-known as a troublemaker to webprogrammers) is causing less problems if you are using divs.
Divs render faster:
Divs load faster than tables. Faster browsing between pages. Better look and feel.
Hope it helps. Cheers.
I am using CSS and tables and sometimes DIVs, but the tables are so comprehensive!
And they look so nice in Dreamweaver, Frontpage...
It is so hard to give tables up, but it seems like I will, because it is necessary to make my pages load faster!
This question already has answers here:
Closed 13 years ago.
I am developing a "modern" website, and I'm having a lot of trouble getting the CSS to make everything line up properly. I feel like they layout would be a lot easier if I just used a table, but I've been avoiding <table> tags, because I've been told that they are "old-fashioned" and not the right way to do things.
Is it okay to use tables? How do I decide when a table is appropriate, and when I should use CSS instead? Do I just do whatever is easier?
The answer is yes, it's fine to use tables. The general rule of thumb is that if you are displaying tabular data, a table is probably a good way to go. You should generally try to style your table with css as much as you can though.
Also, this pie graph might help you:
alt text http://www.ratemyeverything.net/image/7292/0/Time_Breakdown_of_Modern_Web_Design.ashx
EDIT: Tables are fine. For displaying data. Just like my second sentence stated. The question was "is it ok to use tables". The answer is - yes, it is ok to use tables. It is not illegal.
Since even though it's implied to use tables for data in my general rule of thumb, apparently I must also state that the corollary is that it's not ok to use tables for anything else, even though the poster already seemed to grasp this concept. So, for the record, the general rule of thumb is to not use tables for laying out your site.
Tables should be used to represent tabular data. CSS should be used for presentation and layout.
This question has also been exhaustively answered here:
Why not use tables for layout in HTML?
Essentially - if you have tabular data, then use a table. There's really no need now to use tables for layout - sure, they were often considered 'easier' but semantically the page is horrid, they were often considered inaccessible.
See some discussion:
css-discuss
and a particularly comical URL - shouldiusetablesforlayout.com
In the 'modern' approach of tables it is not about using table tags or div tags, but about using the right tag for the right purpose.
The table tag is used for tabular data. There is nothing wrong with using it for that!
For using CSS, there are a lot of tutorials and guides (good and bad) around. Indicators of a bad tutorial are: lot of use of blocks (divs) that only make sense for the layout and not for the content. Good signs are the ones that advise to use the right tags for the right content and teach you how to make up that tags.
Tables are only appropriate for tabular data. Imagine you have to add some spreadsheet like data, where you have clear row/column headers, and some data inside those rows.
A product comparison, for example, is also a valid table item.
I believe that tables are OK for display of rectilinear data of arbitrary rows and/or columns. That's about it. Tables should not be used for layout purposes anymore.
In general, HTML markup should describe the structure and content of a web page—it should not be used to control presentational aspects such as layout and styling (that's what CSS is for). A <table> tag, like most have already said, should represent tabular data—something that would appear as a table of information.
The reason why people rag on tables so much is that in the old days, there was no such thing as CSS—all page layout was done directly in HTML. Tags were not thought of as describing content—all anyone really cared about was how a tag would make things look in a web browser. As a result of this, people figured that, since they could organize things into rows and columns, tables must be good for laying out elements of a web page. This became a really popular technique—in fact, I'd wager that using tables was considered the preferred method of laying out web pages for quite some time.
So when people tell you that tables are "old-fashioned," they are specifically referring to this abuse of the <table> tag that was so popular back in the old days. Like I said, there's nothing wrong with HTML tables themselves, but using them for web page layout just doesn't make sense nowadays.
(Plus, from a purely pragmatic standpoint, layouts done with HTML tables are very inflexible and hard to maintain.)
its ok to use tables when you are showing data in a grid / tabular format. however, for general structure of the site, its highly recommended that you use css driven div, ul, li elements to give you more lucid website.
If you anyways decide to work with tables, you must consider the following cons :
they are not SEO friendly
they are quite rigid in terms of their structure and at times difficult to maintain as well
you may be spending little extra time on div based website, but its worth every minute spent.
The whole "anti-Table" movement is a reaction to a time when deeply nested tables were the only method to layout pages, leading to HTML that was very hard to understand.
Tables are a valid method for tabular (data) layout, and if a table is the easiest way to implement a layout, then by any means use a table.
Table is always the right choice when you have the need to present data in a grid.
Quoting Sitepoints's book HTML Utopia: Designing Without Tables using CSS
If you have tabular data and the appearance of that data is less important than its appropriate display in connection with other portions of the same data set, then a table is in order. If you have information that would best be displayed in a spreadsheet such as Excel, you have tabular data.
I would say no for using tables to construct your layout. Tables make sense only for actual tabular data you need to represent. If you spend enough time figuring the CSS out you will find its easier then using tables for a layout. Just remember: Tables for displaying data. CSS for page layouts.
Tables are just that: Tables.
They are frowned upon because they should not be used for layout, as has been the fashionable thing to do before browsers could position stuff properly.
If what you want to markup is, in fact, a table, then use a table. Other than that, try to stay away.
One small thing: Aligning two parts of text to the exact same line that won't move apart (think, username and post date). There using a table is IMHO an option.
First get it working. Then get it perfect.
Get the layout done in some way before making it perfect or better.
How many people per day will go to the page you are working on? A million? or 20 ?
How much time are you going to spend on CSS issues instead of other issues? Does your boss want you to spend this much time on the issue? Does he/she know what you are doing?
Absolutely. I don't know where CSS zealots invented the idea that tables are not naturally used for "layout". Tables have been used for laying things out since their invention, whether those things be numbers, words, or pretty pictures. That's what they do. Moreover, table is part of all versions of (X)HTML so there are no deprecation concerns.
Absolutely.
All that HTML offers was originally intended for you to define the markup of your page. In my book, absolute and relative positions of elements on a page belong to markup. So both divs and tables are very much suited for this task. Pick up what works best for your particular need.
CSS adds many styling possibilities and also layout tricks but it complements HTML options not replaces them.
There is actually a very fine line between seeing something as a markup or styling issue. CSS proponents would say that with CSS you can relocate and reshuffle completely all big and little pieces of a page. I cannot however imagine putting header below, footer above and making things appear in reverse order.
Take an example. You design a notebook. You know where to place major components, mainboard, cooling system, keyboard, display and ports. You may certainly wish to rearrange a little bit port connectors, on whic side and in which sequence they appear, but you don't really expect to put display where the keyboard is, put keyboard on the lid, make fans blow to your face and have all connectors on the botom to be reached through holes on your desk.
Using tables can make it slightly difficult to rearrange elements on a page. This might be true. However, in most cases you know in advance how approximately your page should look like and you would not want to change everything drastically. if you can't say it before your begin your work you probably have no clear idea what you are doing and what for.
Moreover, only tables possess elastic properties, which allows the to stretch to the width/height of their content. Nothing else of HTML/CSS can be used to do that.
CSS design on one side allows you to create quite adjustable designs. On the other hand, it locks you out from designing a page adjustable to its content. Both wins and losses.
Table is also the only tool to make very complex and precise interfaces. For example, the page SO is very simple. It probably can be done with pure CSS. In the meantime, have you seen any enterprise-class software like CRMs, SRMs etc? That multitude of buttons, text field, check boxes, dropdownlists all precisely located on a screen? Good luck achieving that kind of complexity with just CSS. And these layouts migrate from desktop applications into web each day (keyword: software-as-a-service).
So choose what suits best your current need and don't trust those CSS lovers. Actually don't trust any fanatics at all.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Why not use tables for layout in HTML?
Under what conditions should you choose tables instead of DIVs in HTML coding?
The whole "Tables vs Divs" thing just barely misses the mark. It's not "table" or "div". It's about using semantic html.
Even the div tag plays only a small part in a well laid out page. Don't overuse it. You shouldn't need that many if you put your html together correctly. Things like lists, field sets, legends, labels, paragraphs, etc can replace much of what a div or span is often used to accomplish. Div should be used primarily when it makes sense to indicate a logical division, and only appropriated for extra layout when absolutely necessary. The same is true for table; use it when you have tabular data, but not otherwise.
Then you have a more semantic page and you don't need quite as many classes defined in your CSS; you can target the tags directly instead. Possibly most importantly, you have a page that will score much better with Google (anecdotally) than the equivalent table or div-heavy page. Most of all it will help you better connect with a portion of your audience.
So if we go back and look at it in terms of table vs div, it's my opinion that we've actually come to the point where div is over-used and table is under-used. Why? Because when you really think about it, there are a lot of things out there that fall into the category of "tabular data" that tend to be overlooked. Answers and comments on this very web page, for example. They consist of multiple records, each with the same set of fields. They're even stored in a sql server table, for crying out loud. This is the exact definition of tabular data. This means an html table tag would absolutely be a good semantic choice to layout something like the posts here on Stack Overflow. The same principle applies to many other things as well. It may not be a good idea to use a table tag to set up a three column layout, but it's certainly just fine to use it for grids and lists... except, of course, when you can actually use the ol or ul (list) tags.
When the data I am presenting is, indeed, tabular.
I find it ridiculous that some web designers used divs on tabular data on some sites.
One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.
I used to do pure CSS but I abandoned that pursuit in favor of hybrid table/css approach as the most pragmatic approach. Ironically, it's also because of accessibility. Ever try doing CSS on Sidekick? What a nightmare! Ever seen how CSS-based websites are rendered on new browsers? Elements would overlap or just don't display correctly that I had to turn off the CSS. Ever try resizing CSS-based websites? They look awful and often detrimental to the blind if they use zooming features in the browser! If you do that with tables, they scale much better. When people talk about accessibility, I find that many have no clue and it annoys me because I am disabled and they aren't. Have they really worked with the blind? The deaf? If accessibility is a main concern, why the hell are 99% of videos not closed captioned? Many CSS purists use AJAX but fail to realize that AJAX often makes content inaccessible.
Pragmatically, it's ok to use a single table as a main layout as LONG as you provide the information in a logical flow if the cells are stacked (something you'd see on mobiles). The CSS theory sounds great but partially workable in real life with too many hacks, something that is against the ideals of "purity."
Since using the CSS with tables approach, I've saved so much time designing a website and maintanance is much easier. Fewer hacks, more intuitive. I get fewer calls from people saying "I inserted a DIV and now it looks all screwed up!" And even more importantly, absolutely NO accessibility issues.
Usually whenever you're not using the table to provide a layout.
Tables -> data
Divs -> layout
(mainly)
Note: At the time the question was asked, there were practical reasons for using tables for some layout purposes. This is not necessary anymore due to browser improvements, so I have updated the answer.
HTML <table>-elements should be used when the data logically has a two dimensional structure. If the data can be structured in rows and columns and you can meaningfully apply headers to both rows and columns, then you probably have tabular data.
I you only have a single row or single column of data, then it is not tabular data - it is just linear content. You need at least two rows and two columns before it can be considered tabular data.
Some examples:
Using tables for placing sidebars and page headers/footers. This is not tabular data but page layout. Something like css grid or flexbox is more appropriate.
Using tables for newspaper-style columns. This is not tabular data - you would still read it linearly. Something like css columns is more appropriate.
I would make a distinction between HTML for public websites (tables no-no-no, divs yes-yes-yes) and HTML for semi-public or private web applications, where I tend to prefer tables even for page layout.
Most of the respectable reasons why "Tables are bad" are usually an issue only for public websites, but not so much of a problem with webapps. If I can get the same layout and have a more consistent look across browsers by using a TABLE than a complicated CSS+DIV, then I usually go ahead and aprove the TABLE.
As many posters have already mentioned, you should use tables to display for tabular data.
Tables were introduced in HTML 3.2 here is the relevant paragraph from the spec on their usage:
[tables] can be used to markup tabular material or for layout purposes...
Agree with Thomas -- the general rule of thumb is if it makes sense on a spreedsheet, you can use a table. Otherwise not.
Just don't use tables as your layout for the page, that's the main problem people have with them.
I can see the argument for tables for forms, but there is a nicer alternative... you just have to roll up your sleeves and learn CSS.
for example:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
You can take that html and layout the form either side-by-side labels, or labels on top of the textboxes (which is easier). Having the flexibility really helps. It's also less HTML than the table equivalent of either.
For some excellent examples of CSS forms, check out these excellent examples:
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
I will usually opt for tables to display form-type information (First Name, Last Name, Address, etc.) where lining labels and fields across multiple rows is important. DIVs I use for layout.
Of course the table is wrapped in a DIV :)
Tables were designed for tabular content, not for layout.
So, don't ever feel bad if you use them to display data.
I use tables in two cases:
1) Tabular data
2) Any time I want my layout to dynamically size itself to its contents
If your data can be laid out in a two-dimensional grid, use <table>. If it can't, don't. Using <table> for anything else is a hack (though frequently not one with proper alternatives, especially when it comes to compatibility with older browsers). Not using <table> for something that clearly should be one is equally bad. <div> and <span> aren't for everything; in fact, being completely meaningless on a semantic level, they are to be avoided at all costs in favor of more semantic alternatives.
On this subject, I thought this site was pretty funny.
1) For displaying tabular data. A calendar is one example of tabular data that isn't always obvious at first.
2) I work for a medical billing company, and nearly all of the layout for our internal work is done using CSS. However, from time to time we get paper forms from insurance companies that our billers have to use, and a program will convert them to an html format that they can fill out and print via the intranet. To make sure the forms are accepted they need to match the original paper version very closely. For these it's just simple to fall back to tables.
Tables are used for tabular data. If it makes sense to put it in a spreadsheet then use a table. Otherwise there is a better tag for you to be using such as div, span, ul, etc.
I believe just tabular content. For example, if you printed out a database table or spreadsheet-like data to HTML.
If you would like to have semantically correct HTML, then you should use tables only for tabular data.
Otherwise you use tables for everything you want, but there probably is a way to do the same thing using divs and CSS.
#Marius:
Is the layout tabular data? No, while it was standard a few years ago it's not now :-)
One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.
I tend to give the label a fixed width, or display it on the line above.
#Jon Limjap
For label : textbox, neither divs nor tables are appropriate: <dl>s are
One other use I would have for it
would be forms, particularly label :
textbox pairs. This could technically
be done in div boxes, but it's much,
much easier to do this in tables, and
one can argue that label:textbox pairs
are in fact tabular in nature.
I see that a fair amount, especially among MS developers. And I've done it a fair amount in the past. It works, but it ignores some accessibility and best-practice factors. You should use labels, inputs, fieldsets, legends, and CSS to layout your forms. Why? Because that's what they are for, it's more efficient, and I think accessibility is important. But that's just my personal preference. I think everyone should try it that way first before condemning it. It's quick, easy, and clean.
When ever a page containg tables is loaded by any browser it takes more time for the browser to render properly the tag. Where as if the div is used ,the browser takes less time as it is lighter. And more over we can apply the css to make the divs appear as table,
The tables are normally heavy wieght and div are light weight.
It is clear that the DIV are used for Layout but It happened to me to being "forced" to use spreadsheets to do a grid layout within a div structure for this reasons:
the addition of percentage values did not allow a proper alignment with the div, while the same values expressed on cells of tables gave the expected result.
So I think that tables are still useful not only for data, but also for the situation above, on top of that, tables are still W3C compliant browser and alternative browsers (for the disabled for example) interpret theirs correctly.
Divs are simple divisions, they are mean't to be used to group sections of the page that are in a semantic sense linked. They carry no implicit meaning other than that.
Tables were originally intended to display scientific data, such as lab results on screen. Dave Raggett certainly didn't intend them to become used to implement layout.
I find it keeps it fairly clear in your mind if you remember the above, if its something you would normally expect to read in a table, then that's the appropriate tag, if its pure layout, then use something else to accomplish your needs.