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?
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!
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.
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.
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.
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.
However, for most basic form layouts, CSS should be sufficient.
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.
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
<SPAN> and CSS.
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.
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!
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.
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).
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.
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.
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?? ? 🙂
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.
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.
Tables are used for displaying tabular data. There’s not much else to add 😀
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.
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.
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.
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).
@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.
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.
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.
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.