It is advisable to use tables in HTML pages (now that we have CSS)?

What are the applications of tables? What features/abilities does tables have that are not in CSS?

Related Questions

+56  A: 

No - not at all. But use tables for tabular data. Just don't use them for general layouting.

But if you display tabular data, like results or maybe even a form, go ahead and use tables!

Forms are not tabular data. The <label> tag exists for associating labels with fields in a form.
Thomas Owens
A straight answer but why? Tables have been widely used for layouts so what is wrong with that? Could you say why you think tables should not be used for layout? (I'm not disagreeing with you - I just think that tables can reasonably used for layout in many cases)
In no particular order: 1) They're inefficient - tables take up space in every single page page whereas CSS can be cached. 2) They're inflexible - you can make a change to one place in a CSS file and all pages using that CSS are automatically updated. Plus, certain browsers can't display them well (mobile, embedded, etc). 3) They're semantically meaningless unless you're actually using them for tabular data.
Cogwheel - Matthew Orlando
The conceptual reason to not use tables for layout is because tables have a specific semantic meaning. Not using them for that causes machine misinterpretation. The practical reason to not use tables is that using tables locks the output into a single layout while using a CSS based layout allows multiple presentations from the same markup, most notably a mobile optimized layout and a desktop optimized layout.
Karl Guertin
It is a bit odd that the years of "using tables for layout is bad!" have led to a point where people have started asking whether they're meant to be using tables *at all*!
@Chris: just like how no one seems to think "and me" is ever correct.
Cogwheel - Matthew Orlando

Tables are used for displaying tabular data. There's not much else to add :-D

+2  A: 

Tables are for outputting tabular data. Anything that you might display in a spreadsheet, columns of results, that kind of thing.

The suggestion of using CSS rather than tables is for columnar layouts, which weren't really actual tables. It was never intended to suggest that tables should be removed completely.

Mike Dimmick
+3  A: 

The benefit of CSS is that it separates design and layout from content.

If you have tabular data then it makes sense to use a <TABLE> tag. If you want to layout different blocks of content then you should use <DIV> or <SPAN> and CSS.

Dave Webb
+1  A: 

My very simple and basic opinion on this is that tables are there for tabular data - not for positioning one thing on top or next to another element because you happen to like it being there.

So - if you want to display a table of data: do so (with a table). If you want to position content on the page: use css.


If there is a reason for using a table in a semantic way (for example for showing tabular data) use tables.

Just use no tables to do layout stuff. There are lot of searchengine und accessibility benefits that you get with semantic markup.

+6  A: 

Everyone so far has said how tables should only be used for tabular data, and this is true. Take a look at the HTML source of any page on SO and you'll see that they have a different idea...

I think their rationale is that sometimes using a table is just so much simpler. Though, there are a lot of really good usability reasons why to avoid them.

+2  A: 

Tables have no equivalent in CSS2, and they aren't that easy to duplicate using css. The particular part of tables that is hard to reproduce is the auto-sizing of the columns. While it's easy to let the 1 row grow to the same size across the page, it's hard for the next row to match up the column size or each cell size dynamically, and in fact can't be done without using other scripting languages such as javascript, php or others. You can use max and min widths, as well as set percentages for cell sizes, or hard code cell width's, but dynamically growing cells work fine for 1 row, it's the next row below it that won't match up.

+9  A: 

Other than for tabular data, tables are unfortunately still necessary if you want to create flexible grid layouts such as complex forms in a cross-browser compatible manner.

CSS2 has support for creating flexible grid layouts without using the table element via the display property, but this is not supported in IE6 or IE7.

However, for most basic form layouts, CSS should be sufficient.


I am going to assume that your question is actually - "Should I avoid using HTML tables for layout purposes?". The answer is: No. In fact, tables are specifically meant to be used to control layout. The drawback for using tables to control the layout of an entire page is that the source file rapidly becomes difficult to manually understand and edit. A (possible) advantage of using tables to control the entire layout is if there are specific concerns about cross-browser compatibility and rendering. I prefer to work directly with the HTML source file, and for me using CSS makes that easier than using tables for the entire layout.

Loren Charnley
No, tables are meant for tabular _data_, not for controlling layout/display.
"...specifically meant to be used to control layout" ??? Mr. Berners-Lee might disagree.
Carl Camera
Calr, you got a reference got that quote?
Christopher Mahan
They most certainly are specifically for controlling layout - the layout of tabular data. Yes, initially the intent was tabular layout of text or numeric data - but graphical data is data too - the distinction is largely artificial..
Loren Charnley

Reserving tables for use only for tabular data works most of the time. There are certain layout problems that are much easier to achieve with tables than anything else. For example, vertical alignment and equal height columns. On the other side of the fence, there have been some complex data tables that I've used floated divs for because tables weren't fitting the bill.

Like anything else, use the right tool for the right job, and sometimes the most pragmatic tool isn't what you think it would be. That said, I rarely use tables for layout, even in the examples I gave, because inevitably I hit some problem that makes me have to do it with CSS anyway. Your mileage may vary.

Russell Leggett

I believe and hope the era of using tables for layout is gone. Simply put: a table is a table, nothing else.

What I think will be the new, similar, flamewar topic for next few years is : should I use new CSS feature display: table, table-cell, table-row etc. for layout?? ? :-)

petr k.
+1  A: 

I think you might be slightly confused. CSS is a method of styling HTML documents, whether this is a table element or a 'div'.

It used to be that tables were used in HTML to design the whole page layout. It was common to see multiple nested tables (usually generated by WYSIWYG programs such as Dreamweaver), and this lead to a maintainance nightmare.

Since the introduction and adoption of CSS stylesheets it is now correct only to use a table for tabular data. That means if your data is most naturally rendered as a table use the table element. You can still style the table using CSS.

However, and I generally disapprove of this method since it duplicates existing functionality, it is possible to use elements to build a table like structure. In fact there are several website that will generate such code for you, but I have no links to hand.

Remeber also that some users might be either viewing in text only mode, or using a screen reader both of which will probably break the page (like reading the columns vertically rather than horizontally) hence the proper use of tables.


For your own sake, please don't do tabular-data in divs. That will surely land you a place on [The Daily WTF](http://thedailywtf.com/Articles/Periodically_Tabling.aspx)
+32  A: 

I guess I'm not in the majority here, but I still see a lot of use for tables in HTML. Of course, yes, for things like forms, you simply can't beat a table. Trying to line up the labels and accompanying form fields would certainly be possible using DIV's, but what a PITA that would be, and resizing the page would be ugly in some cases. A table works wonders here.

But also consider larger issues. For example, have you tried to create a standard 3 column layout with header and footer using only DIV's and CSS? Again, it is very possible, and there are about 1000 websites with examples, but they all tend to suffer from the same problems. The first problem is that the columns never really like to all become the same height without some sort of javascript assistance. The second problem is changing the layout is often a tricky thing, because it is a bit of a balacing act to get everything "just right" to begin with, so then you don't want to mess with it. Finally, and this goes back to that last point - it ain't easy. You have to lay out all your DIV's, then go back and create the magic CSS that force those DIV's into the proper position, and then spend a few hours tweaking it until it is right.... ugh. And then looking at the HTML without a viewer really gives you NO idea what the page looks like because it is ALL reinterpreted by the CSS in the end.

Now, option B. Use a table. Spend about 30 seconds typing out the <tr> and <td> tags, probably no CSS at all, no javascript 'fixit', and know EXACTLY what it will look like just by looking at the HTML.

Certainly there are arguments for and against tables, and purists seem to favor DIV's for layout, but don't use DIV's for religious reasons just because someone told you tables are evil. Use what works best for you, your page, and the way your viewers are going to interact with the page. If that's a table, then use it. If not, don't.

Todd Davis
could you call form labels and input tabular data? possibly.. but I use css to do it and once you do it once and it's easy to apply in all other sites. Take the plunge....
I know how a page will render by looking at the markup and CSS in the same way you can mentally view a site's structure by looking at it's table markup - it's simply just a matter of training. I can code a pure CSS dropdown menu with just a unordered list in a matter of seconds while it would take me minutes to do it with tables. It's because, after my own skepticism, I've forced myself to think in terms of the box model - and if you had any idea how much I've benefited from those initial months of pain, then you would try too :)

I also don't like the idea of using tables to arrange items on a page. However this should not become a religion - tables are bad. I've encountered one example where I have a three column layout and needed the center column to grow with the content. In the end the solution that was the simplest and worked well on all needed browsers was to use a table. IMHO CSS still has some shortcomings and sometimes it's better to use something simple that works rather than just adhere blindly to some idea ('tables are bad...').


you can even use them for layouting, if your layout is somewhat tabular. I like the feature of tables and cells dynamically adjusting to whatever width the browser window is. Never use any fixed widths or height, that's just messing up things.

+4  A: 

If only the CSS equivalent was as expedient in setting up a "table-like" layout, then I would love to use CSS. I find the time that it takes to mimic the things that others have listed here (equal heights on cells, auto-growing rows, etc.) is simply not worth the effort. I don't get a return on my investment as opposed to quickly throwing together a table in most cases.

All browsers can agree on exactly how a table should be laid out. Bam. Done.

Here's how my CSS follies usually go: Try setting up a table-like layout in CSS. Spend 20 minutes or more getting everything just so in Mozilla and then open it up in IE. Spend another 30 minutes tweaking between those two browsers. Pretend like there are only two browsers in the world because I actually need to get some work done.

I believe in the promise of CSS: Separation of concerns. The problem is that for those who need to be productive, CSS is not ready for prime time. Or perhaps it's the rendering engines of the browsers - whichever.

Paul Prewett
It is not true that all browsers lay out tables the same. For example IE distributes percentage heights after a different algorithm than Mozilla and WebKit,

It's easy. Think your webpage as a real page on paper. You should use tables on webpage only when you would draw a table on your paper.

Another tip is to use table only with border > 0. This way, you use tables only when you mean you want a table (and not for layout).

+1  A: 

I think it all depends on time/effort. While a purist might say "only use tables for tabular data," I've used tables to ease cross-browser layouts in the past.

For me, it's matter of time utilization. I can either spend my time cranking away on the CSS to get it right or I can toss it in a table and spend far less time on it. I tend to go this route until things are up and running. Once the functionality is there, I go back and polish the CSS/HTML.

Matthew Cole
+1  A: 

I think the reason this comes up so much is that using html tables is easier to understand when creating structure and layout than CSS. Using CSS is more abstract but helps seperate your code.

In response to the "structure" argument...by definition, isn't using html tables giving structure to data so that you identify it as "tabular". Whether it is CSS or html you are controlling the flow and layout of data. Be it tabular or otherwise...

If CSS tables are so important (and I'm sure my answer will start some kind of flame war) why isn't there a mechanism in Visual Studio to create a layout using CSS? Oh, you didn't check the layout feature thingy in VS? Yeah, you get tables, straight from Microsoft. I'm not complaining, just making the point that if it meant as much to the rest of the world you would see MS switch to CSS.

In my opinion do what fits best with your project. For one or two page web projects I still use html because what it does is obvious. Using CSS is more abstract and some mornings I just haven't had that much coffee. HTML tables can get messy, fast. CSS takes a little more time to get messy but will too.


Tables make sense only when you're trying to display tabular data and that's it. For layouts, you should always use DIVs and play with CSS positionings.

Luis Abreu

See this duplicate question.

Joel Coehoorn

Tables are made up of columns and rows, ergo if you want a three column web page for example, then it is a tabular display so use a table.

Jumping through browser-inconsistency nightmare hoops by trying to simulate a tabular display with CSS is an insane waste of time. Tables are dead simple and they work; so use tables. The "make life hard for yourselves: never use tables" CSS purists are fools; plain and simple.

Edit: the five down votes, with only one person leaving a comment to explain their down vote, clearly shows how brainwashed people are on this subject. They mindlessly repeat "css + divs good; tables bad" without actually understanding what they are saying.

David Arno
You never needed your pages to be accessible and search engine friendly then?
My pages are fully accessible and search engine friendly. The idea that tables cannot be accessible is pure myth. That is why the CSS purists are fools: they make life difficult for themselves due to a lie.
David Arno
You're probably not earning yourself any points by calling the CSS-purists 'fools', David. But I do see your point. I prefer the simplicity of tables myself IF the page isn't target at multiple browser types. If you want to serve to both desktops and mobile devices, having CSS flexibility is easier!
@AR, you are probably right. A number of the down votes probably do stem from me being insulting, rather than people disagreeing. Maybe I should tone it down at some stage :)
David Arno
thats weird, google uses tables
Shawn Simon
+2  A: 

I have to go with the tables approach here. The reason for this comes simply down to cost. Until a well supported CSS-centric approach to layout comes out, and I am talking about at the macro level...not micro within containers, trying to shoehorn CSS positioning into a generalized approach to layout is inefficient. You have to approach this from the perspective of the person writing the check for the development.

A few years ago I contracted to develop and maintain a site for a major hotel chain. We went with a table driven layout; your basic header, body, footer with left/right columns. We also used tables for some of the finer elements like non-graphic buttons. The chain's parent company maintained their own site and went with a pure CSS approach to layout. When IE7 came out our site worked perfectly without any changes. The parent company's site was a mess. Overall they spent about 1000 total hours (between meetings/development/QA/rollout) fixing the issues.

When you are paid to develop a site part of your responsibility is to mitigate against future risk and minimize future development costs, particularly if those costs do not add value to the site (your product).


Although for some layouts using tables may seem simpler at first, when maintenance time comes using css pays off. Especially if you ever want to change the position of something, or if you want to use the same layout in several places.

IMHO, tables should be used only when presenting tables. Never for layout purposes.


@toddhd, advocating the use of tables for layout simply to save time is a cop out. If time is the issue, then you can quickly create a columnar layout without tables using a framework like Blueprint CSS or 960 Grid.


Seems to depend on what browsers were capable of when you started designing. If you began back when only tables worked then that is what you will probably always want to use, because you know it. Or if that is what you liked to use even after browsers had advanced to be able to render CSS...

I just don't like to keep doing the same things over and over because they are easy and I know how to do them.That is boring. I would much rather learn new techniques than dismiss something because I don't know how to use it or I think I don't have time to learn.

I don't like to use tables, I don't understand them, they seem alien and offensive but that is because I began in 2005. I also don't use design programs to spit out templates because I prefer hand coding.


if you need to use a table, your layout probably sucks. Show me a single well-designed site that uses tables, and I'll show you a thousand that don't.

A lot of people are throwing around the term "purist". This is rubbish. Would you print newspaper copy in a book? Would you design a brochure with Excel? No? Then why would you use a table to display non-tabular data?

Most times the difficulties people face in letting go of tables for layout is a result of their own ignorance of HTML/CSS/Good Design Principles. While you may find it difficult to make multi-column layouts extend evenly in the vertical direction, you might think to try a different method. DIVs are not TABLEs. You can make faux columns using wide borders, page backgrounds, etc. Spend some time actually learning to do what you're setting out to do, or forever be seen as someone without any kind of useful skill. (http://www.alistapart.com would be a good start)

I'm honestly surprised that this question is cropping up in 2008. DIVs came around when I was in high school. Stop being a noob.

And as was mentioned above, tables fail hard on mobile devices and screen readers.


Scanning over these answers, I didn't see one real-world reason where tables are necessary for layout and that is html emails.

I work for a very, very large financial company and we track around 600 different jobs a month....many of which are multiple email campaigns.

You cannot use css for layout for any mail reader. There are a few inline css specs you can use that relate to color, font face and size and even line-height is fairly widely available but for layout, you have to use tables as all the major and most minor email readers (Outlook 97/03, Entourage, MSN etc) read them just fine.

The issues with tables come into play when you have td's that do not have height/width specified whether they contain data or not. So, 'broken' table layouts are usually fixed by paying attention to attributes and yes... whitespace in the html....yes whitespace that isn't supposed to matter.

So, if you ever work for a large company/corporation or you land a very large client, be ready to throw all the current technology out the door and get your html table hat on!