Should Tables be avoided in HTML at any cost?

Question

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

• Tables instead of DIVs
• DIV vs TABLE
  • DIVs vs. TABLEs a rebuttal please

Answer 1

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!

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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!

Answer 10

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.

Answer 11

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).

Answer 12

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.

Answer 13

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.

HTH

Answer 14

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?? ? :-)

Answer 15

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.

Answer 16

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.

Answer 17

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

Answer 18

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.

Answer 19

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.

Answer 20

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...').

Answer 21

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.

Answer 22

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).

Answer 23

@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.

Answer 24

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.

Answer 25

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.

Answer 26

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.

Answer 27

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.