1. Computing

Discuss in my forum

Jennifer Kyrnin

Poll: It's 2013, do you still use tables for layout?

By January 3, 2013

Follow me on:

One of the big changes in HTML5 was to make using tables for layout a valid choice for designers who want to do so. It is recommended that you use the role="presentation" attribute or the border="0" attribute to give some clue to the browser that this is a layout table and not a data table, but even if you do neither of those things it's valid in HTML5 to use tables for layout.

Of course, I still believe that it is better to use CSS for design and look-and-feel elements of your page, and use HTML tables to define tabular data. CSS may seem hard to learn to create layouts in, but perhaps this year, you might consider learning to use CSS for layout—if only so that you can more easily design CSS media queries for different devices viewing the same page.

Comments
January 3, 2013 at 1:46 pm
(1) Peggy Shields says:

For the most part, I use CSS, but sometimes a table in a page makes it easier to quickly make a 2 or 3 column layout within the main content area and is appropriate. Why have rules if you can’t break them? ;-)

January 4, 2013 at 3:33 pm
(2) Jennifer Kyrnin says:

@Peggy Shields: “Why have rules if you can’t break them?”
I completely agree! :-)

January 3, 2013 at 4:29 pm
(3) Dazza says:

Timewise, tables are much quicker to design with and don’t mess with the intended layout especially if fluid layouts are required.

CSS is great for general design but still a pain to use for layout.

January 8, 2013 at 7:54 am
(4) Jordan Trainor says:

I have never read so much rubbish about HTML5. This is absolutely incorrect. Where did you get this information, because it’s certainly not from a web professional.

If anyone thinks tables are for design, they’re about a couple of decades out of date.

The only reason they were ever used for layout was because there was no other option.

Any person who builds a website using tables for layout should never be employed as a web developer because they obviously have no idea what they are doing and should find another profession to poison.

January 8, 2013 at 4:00 pm
(5) Jennifer Kyrnin says:

@Jordan

While I agree with you that tables really shouldn’t be used for layout, did you read the associated article? In it I quote the W3C HTML5 Candidate Recommendation where it says

“Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role=”presentation” for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.” (emphasis added)

This is a change from the HTML 4 and earlier specifications where they recommended explicitly against using tables for layout.

In other words, while using tables for layout still isn’t recommended or considered a best practice, it is now a valid use according to the specification.

January 8, 2013 at 2:56 pm
(6) Stephen says:

There are some browsers that will ALWAYS display a border around HTML table elements regardless of what you specify.

Another consideration is that all browsers now support using CSS tables for layout using display:table, display:table-row and display:table-cell so there is no reason to code table layouts in the HTML – you can code them in CSS and make it easier to change the layout in the future if necessary.

January 9, 2013 at 12:04 am
(7) Jordan Trainor says:

@ Jennifer

I understand where you’re coming from, but this wasn’t exactly specified in your short article and had no referenced links. That coupled with agreeing rules are made to be broken… well I was surprised to say the least as I’m sure you can tell by my over reaction.

The first line of the paragraph from the documentation says “Tables should not be used as layout aids.” That is as straight forward as possible. They’re not to be used for that purpose.

What HTML5 does though, is tries to support existing content. So if you have an older website that has been constructed with tables, and you want to make it more accessible to screen readers, then you add the role=”presentation” to the layout table so the screen reader can tell the difference between content and tabular data for better extraction.

It’s not to be building new websites using tables, but to make older websites more accessible and be able to update them to the new specification.

Right now with this article, unfortunately you’re promoting bad practice.

January 9, 2013 at 1:19 pm
(8) Jennifer Kyrnin says:

I have and continue to say over and over that using tables for layout is a bad idea.

However when ever I say that I get dozens of angry posts from readers saying I’m being unrealistic, stupid, a horrible person and that I eat babies (okay maybe not that last bit…). In fact yours is one of the first times I’ve ever been chastised for mentioning that people can and do use tables for layout. If you don’t believe me click through to the article referenced in the blog post, search my site for tables for layout articles and blog posts, etc.

I have quoted previous versions of the spec which gave no out for presentation. Previously tables for layout was invalid HTML. Now it’s just not a good idea.

Again, I agree with you. I think people should take the time to learn CSS for layout, but I am not going to misrepresent the spec simply because I don’t agree with this slight loosening of the rules.

Thanks for your comments.

January 10, 2013 at 1:25 am
(9) Jordan Trainor says:

It’s not misrepresentation at all.

The first line of the paragraph on the reference you made reads “Tables should not be used as layout aids.”

There you have it, it’s as simple as that. The W3C tells you right there that tables should not be used as layout aids. How can that be confused?

Yes I know you’re pointing to the part where it says “If a table is to be used for layout it must be marked with the attribute role=”presentation” for a user agent…” And this is where you’re getting confused I think.

HTML5 supports existing content like I already mentioned. The presentation is more for updating rather than new building. This property will enable you ” to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.”

Just because they have provided a way to fix problems of the past, doesn’t mean we are to repeat those in the future.

Your view is wrong on this. I know I may sound stubborn, but you’re wrong on this. You’re misrepresenting it now by ignoring the first line that states, as pointed out several times to you now…

“Tables should not be used as layout aids.”

It’s not, If you are using…, but “Tables should not be used as layout aids.”

It shouldn’t matter if people get angry with you for saying this in your past posts. Fact is fact. Could you imagine a car mechanic or a doctor who didn’t like doing things as they should be done? Exactly.

You’re in a position to be giving information to people who want to learn. At the very least when someone challenges you to that information, and you are wrong, admit it. Correct it. Change your views. If you don’t think I’m right, then send the W3C and email to ask them clarify. I think you’ll find they agree with me. They’ll simply tell you “Tables should not be used as layout aids.” :)

January 10, 2013 at 2:11 am
(10) Jordan Trainor says:

You don’t need to answer the last message I sent in. I see your point and agree that if a hack web developer has this option, then at least it can be made accessible.

It’s a solution to a problem.

I just dislike when someone is seen promoting bad practise and almost agreeing with people that it’s ok to break the rules. That’s the exact opposite from what I’m all about.

Regards.

January 10, 2013 at 10:52 am
(11) Stinger51 says:

CSS does NOT work the same across all browsers — and never will. If you use tables, just try putting a border around one using IE vs. Firefox vs. Chrome. Same way with centering. I can’t tell you how many times I gave up in frustration and just went back to using the good old center tag.

As for trying to design a tabular layout with just CSS, this can be a real nightmare. It may indeed be satisfying to know you are a “purist” in the end. But if it takes you two hours and your fellow programmers (who are not purists) need only 20 minutes to do the same layout, you will not work long in this industry as a designer.

As long as different browsers exist web pages will be rendered in different ways, no matter what the HTML or CSS standards are. Technologies like jQuery can go a long way to helping with these differences. But in the end, you still must pick the best tool for the job with whatever limited project time you have. And if that involves using a table, then use it. Your readers could care less about you being a purist.

January 16, 2013 at 2:40 pm
(12) Laura says:

I have always used tables for layout as CSS does NOT render correctly on all browsers. If I spend twice the time to create a website using CSS and the client’s browser can’t view it correctly, I have wasted my time and have an unsatisfied client. Not worth it. I recently even had a friend tell me how refreshing it was to view my table-built site on her phone as she could navigate better than on other sites where the CSS tried to fit it on her screen.
If one prefers to use CSS, fine…use CSS. But leave us table builders alone, we are very happy back here in the stone-age of design.

April 9, 2013 at 1:50 pm
(13) Paul says:

I build all my layout in Fireworks and slice it out to dream weaver. All is table based and every web site I do looks great and works cross platform with no issue. CSS is not a must so get of your pompous ride. Search engine ranking has no bearing, geat over it. It wasn’t broke when I started Web Design and I won’t fix it, it works great for me ;-)

April 9, 2013 at 3:24 pm
(14) Jennifer Kyrnin says:

@Paul: No one was being pompous here, but you are being somewhat rude in your comments. The fact is that websites are designed differently by different people, just because you use tables and I prefer CSS doesn’t make either of our methods better. I have outlined, many times, the reasons I feel that CSS has benefits. But honestly, the only argument you list in your reply that has any weight with me is that tables work great for you. Perfect, then you should keep using them. But you’re not going to convince me or anyone else that they are better than CSS by calling us names and making specious claims about SEO. I’m glad it works for you, here’s hoping it continues to and that you don’t come across any clients who want you to do something you are not willing to learn.

April 14, 2013 at 11:35 pm
(15) Paul says:

@Jennifer.

I do not think I was being rude at all, sorry if you took it that way. The debate of CSS and Tables is just so old to me. I have learned CSS and spend more time trying to render a complicated web layout cross broswer. When I can create my design in a WYSIWYG Editor and slice it out “Graphic” for graphics and “HTML” for HTML, and have no issues with the code produced by lets say Adobe Products and the HTML is sliced out in Table form, works on in all browsers including Mobile Devices why not do it the easier softer way. I do have one questions, what is it that you think I will run into from a client that I cannot address?

April 15, 2013 at 5:53 pm
(16) Jennifer Kyrnin says:

@Paul: It feels old for me, too. :-)
Since you bring up mobile, I’ll mention that tables can be problematic on mobile. It depends upon what you mean. iPhones and Android smartphones tend to be okay, but even they can have problems if the width if the table is wider than the screen – I’ve seen pages on my iPhone that I was expected to scroll sideways and down to view the whole page. This can be done in CSS, but it happens more often with tables. Plus, non-smartphones do not all handle tables well, especially nested tables.

It’s interesting that you’re getting tables sliced in Fireworks. It must be an older version? You can use Fireworks CS6 and CS5 to slice your images/pages as CSS, no tables required. I’ve been using Fireworks with Dreamweaver this way for at least two years.

I have had clients who have explicitly asked for CSS layout – no tables. Other readers have told me that they’ve never had a request like that, and I’m happy for them. I am just pointing out that there are clients (and in my case, very well-paying clients) who have very specific requirements regarding the technology that is used, and tables for layout has been spelled out as a no-no to me. If you were offered a job from one of those clients, would you be able to help them? In other words, use CSS for layout even though you prefer tables? If so, then I think you’re doing fine. But if not, then you might be limiting your practice.

Thanks for the reply, and thanks for clarifying that you weren’t trying to pick a fight or be rude. I appreciate the clarification.

April 17, 2013 at 4:55 pm
(17) Paul says:

@Jennifer

I am using an old version CS3, guess it’s time to finally upgrade ;-) I cannot tell a lie. I have run across a few companies in my time that I had to turn down and refer out. Guess it’s time I start getting up to date. I am trying to learn WordPress at the present time. If I may ask you question or anyone else wanna chime in; were is a good place to start learning the fundamentals of CSS and what version should I start with. Not wanting to derail the thread and sorry if I am.

April 18, 2013 at 12:15 pm
(18) Jennifer Kyrnin says:

@Paul: I’d start not by getting a new expensive copy of DW, but rather focus on learning CSS. While there have been some interesting new things added to DW since CS3, it’s still pretty much the same beast. I have a lot of tutorials right on this site for learning it: http://webdesign.about.com/od/beginningcss/p/learncss.htm is a good starting place. I’d love to see suggestions from others as well.

April 23, 2013 at 9:58 pm
(19) Paul Lancieri says:

@Jen

I thank you very much and sorry it took some time to respond. I have so happy that you posted the link. I have looked over Alot of you tuturials and am going to finally delv in and learn what I need to learn. I downloaded a version of Notepad + and will keep you informed. I spoke with one of my friend Dustin Levine and he actually started out his careerr with your tuturials, and now he is very successful in the not only web dev but SEO also. I would like to add you to my circle in Google. Just to give you a quick background. I was getting ready to start a website for a landscaping company and did a search regarding tables vs Div and came across your article. I am fearful trying to learn something this new at the age of 42 but am going to give it 100%. I will be following your posts more often. And in regards to the post I saw about SEO and Domain Url’s, I can tell you from my experience that it does not matter as much as people think. I currently have aclient who deals in Epoxy Adhesives, his domain name is atc.ws and I am ranking him very well for the keywords he chose. I say contnet is king when it comes to SEO. Maybe you can email me on how I could have done his site better “without tables”!

Regards,
Paul

April 24, 2013 at 5:23 pm
(20) Jennifer Kyrnin says:

@Paul: don’t be fearful. I and all the others on this site are here to help you. Content definitely is king when it comes to SEO. Here’s a good article to start with for learning how to do layout without tables: http://webdesign.about.com/od/css/a/aa102102a.htm

Good luck, and don’t give up!

May 1, 2013 at 2:39 pm
(21) Jim says:

For layout, CSS is a no-brainer. Tables should only be used for data to be displayed in a grid. And for those who say that CSS doesn’t display properly across browsers, this is somewhat true but I rarely find where I can’t get my layouts consistent across all browsers. You just have to keep plugging away until you get it right. For one, do not code for IE as you’ll end up with more things to correct. Firefox or Chrome is the best way to go and then make adjustments for IE as necessary. Use a reset stylesheet to eliminate browsers inconsistencies right from the get go. If you can’t do CSS for layouts, you’ll be lucky to find a web development job in this day in age.

September 10, 2013 at 7:22 pm
(22) Judy says:

I am still a beginner with CSS but I do use it for my general layout. I do a lot of artist websites, however, and like to be able to present thumbnails of the images. Trying to do this with CSS made me crazy. Just creating a simple table to display a page of thumbnails within my CSS layout was really simple. What do you think about this? Is there some other method I should try?
Thanks in advance for your advice.

September 11, 2013 at 12:15 pm
(23) Jennifer Kyrnin says:

@Judy: do you have a URL of a page as an example? Many sites use CSS to manage thumbnails and photo galleries. If I could see what you are thinking of I can better give you suggestions for how (or if you should) you can change to CSS.

Leave a Comment

Line and paragraph breaks are automatic. Some HTML allowed: <a href="" title="">, <b>, <i>, <strike>

©2014 About.com. All rights reserved.