For tabular data, what renders faster, CSS or <TABLE>? [closed] - html

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am looking for some stats on current browsers for how long it takes to render a table using plain HTML versus a hacked-up CSS puritan method that avoids using actual TABLE, TR, TD etc. tags.
I am not looking for what's proper, only for what's faster, particularly on Firefox 3, although I am also interested in the stats for other browsers. Of course TABLE tags are designed for tables. That's not the question.

If you really have tabular data, then use tables. The idea that you should never use tables for anything was a mistaken extension of the correct concept that you should use html tags only for their intended semantic purpose. That means use CSS for layout, but use tables for tabular data. It does not mean never use tables.

In general, I would say use <table> for tabular data. However, if the table is very long (say, over 100 rows) and the number of columns is low (~3), using divs to emulate rows would result in a much smaller markup footprint. This is especially relevant if you are using DOM searching javascript (as provided by the many JS libraries), as it would benefit to reduce the DOM tree size.
This is from experience, I had such a table and was looking for optimizations - moving to a div based display cut the HTML generated to a third and was a big improvement in DOM traversal performance.

Since some browsers wait until the entire table has been transferred to display it in order to make sure they have adjusted the column widths for content size, using divs will probably render faster if you're looking for an average across every browser.
That being said, if you need a table, use a table.

This question looks to be similar to this one:
Why not use tables for layout in HTML? so you might want to check some of the responses there as well.
In general, browsers will not render a table until the entire table has been calculated, which means that from a user perspective a large table is slower than the same content using CSS styling in place of tables. I was working with a web application at one point that was using tables to display a grid of status information, and it was extremely intensive to display and very slow. The same information displayed using CSS was faster and more importantly, started to display line by line as it was loaded, instead of waiting for the entire table, so it felt faster as an end user. I would suggest investigating using CSS to display the data using a sample dataset for testing. This is what I did to confirm that the tables were in fact much slower for the particular use case we had.

If you use CSS for layout and you adhere to best practice and keep your CSS in a separate file(s) then your CSS will typically only need to be downloaded once before it is cached, giving you the benefits of caching.
If you use tables for layout then your layout tables will be sent with the HTML for every page, increasing your bandwidth and download times.
To improve the rendering speed of tables though you could try setting the table-layout:fixed; to see if that helps..

Different browsers have wildly different javascript/css performance, so it's very hard to generalise here. For example, IE7 has a shockingly slow engine, and Chrome's is mind-bogglingly fast. Firefox is somewhere in between, depennding on if you're using 2 or 3.

I would not take rendering speed as the most important aspect here. HTML tables are made for tabular data. Putting that into a lot of DIVs or so would be totally wrong in my understanding.

Like most of the above answers, I too would say use Tables if you are displaying tabular data and DIVs if you want to control layout (using CSS3). Contrary to belief, tables are not slower in rendering than DIVs if you set a few properties like colgroup and keep layout as fixed. Check out the details of how to in the following link:
sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

For tabular data, use a table. Tables come with all kinds of nice features, like <thead> and <tfoot> tags, legends, titles, captions, etc. Everything you need to make a table a table.
Also, if the CSS doesn't work/isn't loaded/doesn't matter, the table will still look and work the way it should.

Personally from what I have read, if you are actually presenting tabular data, a table is more appropriate for the task, I personally hae found that to be pretty true.
As for raw number of what is "faster", as mentioned by #skaffman it depends on the browsers...but to be "correct" it would make sense to use a table for tabular data.

Related

Does using tables instead of CSS to control layouts have any legitimate use? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
I'm updating a lot of code for a web app and tables are used everywhere to control layout.
I'm relatively new to HTML programming and am not sure what to make of the use of tables where CSS could seemingly be used. Is this just from a time now gone?
Bottomline, is the latest iteration of CSS and browser support acceptable enough to consider styling using tables antiquated?
In my opinion, the CSS is much easier to use.
It's a bit subjective, I know, but I think a consensus can be reached.
Use tables for tables. CSS for everything else.
The guy who first thought of using tables for layout wrote an article in 1997 stating, "The Web is Ruined and I Ruined It". There are countless similar articles, such as "Tables for Layout is Stupid" and the like. CSS has been around for that long and no developer worth his salt would not use it to layout his web pages. We're on the 3rd iteration of it and CSS itself is used to style tables by default in the browsers themselves.
At best, tables are a predefined, immovable grid of boxes you must fit your design into. Compare that to CSS which has limitless flexibility and reasoning for tables for layout flies out the window.
Do not use tables for layout. Use CSS. Nothing else to discuss.
This seems like a pretty subjective question, but basically the answer is that if the data lends itself to a table, put it in a table element. You can still style the tables with CSS, the HTML should describe the data whereas the CSS styles it.
If you have a table of data, don't make a "fake" table using divs/spans and make it look like a table. Put it in a table and style as appropriate.
If tables are being used for tricks like a 2-column layout, where there is no tabular data...yes that way of styling is obsolete and depreciated.
Keep in my though, I don't believe its a horrible "sin" to use tables for styling if it saves time, makes cross-browser compatibility easier, and looks fine. Remember, the only one (usually) reading your markup is the browser. If its going to take hours to rip out all the tables for the exact same end result, you might want to question if its worth the time/effort. On the other hand, when starting from scratch, you may as well learn the modern methods and create some maintainable markup.
Tables aren't going anywhere, it's in the HTML5 spec for a reason. You shouldn't use a table to style your website, but if you have some tabular data, then put it in a <table>. Just as you would put a paragraph into a <p>, a list of items into a <ul>, or a header into a <h1>.
People are so rash in their judgement of tables because they were used for evil for so long. I can use a bunch of <div> containers and a crap load of CSS to mimic an unordered-list, or just use semantic markup.
So, the lesson to be taken from this is, use tables for tabular data, and NEVER for styling. You should also never use things like valign="center" and cellpadding="0" on your table elements, this should be passed onto the responsibility of CSS to style.
P.S. look at Google's code, they're still using tables, and they're one of the main companies who are pushing HTML5.
It's easier (arguably), and has use for email clients. Legacy support is also better for IE 6 and below as well as other older browsers. Other than that, I have yet to see something tables can do that cannot be done with modern CSS. So the short answer is not any more.

Why are HTML tables frowned upon? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 12 years ago.
Is it just because some people think they are harder to read? I find it much easier to explain a layout to somebody by drawing a grid than by using floating divs. And if they are learning to code floating divs then they have to deal with the setting widths and using CSS clear.
(by the way, I don't use tables myself)
They violate semantics of what a table is. Tables should be used for tabular data. They also are quite heavy on markup. In addition, they lock your site into one structure to a specific grid.
Tables are for storing tabular data. Content is not tabular data.
It's mostly a matter of separation of concerns - your HTML should be marking up your content, not decide on what the UI will look like and be layed-out, which is the concern of CSS.
Tables should be reserved for tabular data.
Its mainly a hype. Tables are an acceptable way and often more logically way of separating a view into multiple sections. However CSS is more dynamic, if you go with tables you're often stuck with them especially since tables are often placed in between 'the data' while css is defined externally. Also changing a 'table-like' layout made in css is easier than changing a table made layout.
On the internet there are a couple of good resources about this question:
http://www.decloak.com/dev/csstables/css_tables_01.aspx
http://iamelgringo.blogspot.com/2009/02/tables-vs-css-css-trolls-begone.html
As you can see it's also often a semantics thing. Semantically a table is not ment for layouts, (however it sure is handy and these kind of distinctions are more for purists).
This is taken from another site, but still just as relevant:
Tables are usually more bytes of markup. (Longer to download, and more
bytes of traffic for the host.)
Tables usually prevent incremental rendering. (Takes longer
for the user to see anything on the
page.)
Tables may require you to chop single, logical images into multiple
ones. (This makes redesigns total
hell, and also increases page load
time [more http requests and more
total bytes].)
Tables break text copying on some browsers. (That's annoying to the
user.)
Tables prevent certain layouts from working within them (like
height:100% for child elements of
). (They limit what you can
actually do in terms of layout.)
Once you know CSS, table-based layouts usually take more time to
implement. (A little effort up-front
learning CSS pays off heavily in the
end.)
Tables are semantically incorrect markup for layout. (They
describe the presentation, not the
content.)
Tables make life hell for those using screen readers. (Not only do you
get the other benefits of CSS, you're
also helping out the
blind/partially-sighted. This is a
Good Thing.)
Tables lock you into the current design and make redesigns MUCH harder
than semantic HTML+CSS. (Have you seen
CSS Zen Garden?)
SAUCE: http://phrogz.net/css/WhyTablesAreBadForLayout.html
Not every browser displays them the same way... should only be for tabular data, not content

Should I use tables when creating tables in HTML/CSS [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have a beginner's question for web development. I am going to create a table in which I am having input fields which I will submit to the server.
What is the common practice for doing this? Should I use html-tables or should I build the tables using stylesheets for positioning and sizing cells, columns, etc.? If both are common practice, what are the pros and cons of using eithor of those?
If the content is tabular in nature, logically structured in rows and columns, then the appropriate tags - the tags that describe the structure of the content - are table tags.
You will have folks on both side and some will be nicer than others. Essentially, you use tables for tabular data and not to make a layout for your buttons, logos, etc..
On the other hand, I have some old asp Classic code where we used tables everywhere and it still works great.
If I did it today, I'd use "semantically correct" design where I could which means tables for table data (things displayed in row and column) and the css stuff for layouts.
I usually use divs for this purpose. The strict definition would be to use tables only to display semantic content.
You need to plan carefully first what you need in terms of layout, whether sections are going to be similar, whether there is a lot of sharing or not. And the amount of formatted container your foresee.
It naturally occurs to you that if you can centralise the design on some CSS commands, you will benefit from being able to change looks at once as they are all linked to a common source.
If you are going to have several pages, you will be thinking of having the CSS even on a different page and link to it from others.
Also, you need to know that divs and spans work in a different way than other HTML elements. You will not be able to obtain effects that you would have obtained with a table.
In other words, what you need to do is go to the w3 website and read everything about CSS. Expecting to get an answer in 3 lines about such a huge subject will not help you much.
Alvaro
My motto for html/css is:
"Use the right tag for the job". If its a table let it be a table :)

Does it make sense to use the <table> tag on a "modern" website? [duplicate]

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.

Tables instead of DIVs [duplicate]

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.