Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Rothra
6,711 PointsAre HTML Tables Really Necessary Thanks to DIVs, CSS, etc.?
A few years ago I was taught that thanks to DIVs, CSS, and other features, tables are no longer necessary, and are outdated. In the world of responsiveness to various devices, I wanted to get others' thoughts on this.
Basically, when is a table better than other options to create the same layout?
8 Answers
Scott Albritton
2,000 PointsEDIT: This comment happens to be at the top, but you should really read the responses below about the ongoing need for using tables when crafting HTML-based e-mails.
Tables aren't bad, they should just be used to display information that is meant to exist in tables. Tables are a type of content, just as pictures are a type of content. It's bad form to use a type of content to structure the display of other content (imagine if your entire page layout was done with pictures - that's the equivalent to the backlash against tables).
The <table> tag was originally put into HTML to be used to display tables of information - it wasn't supposed to be used for page layout, but without tables, 'webmasters' of the 1990s and early 2000s were limited to one column of text/design. That meant that if you wanted to have a blog with a column of links on the left, and a center column of text, and a smaller column of info on the right, you had to use a table (or make one huge, slow-loading image).
Until CSS was in its second iteration, tables were effectively the only way to get consistent page layouts. Once CSS started to become more widely adopted, designers could get more serious about separating content from design/layout decisions. However, CSS is harder to wrap your head around than tables, so many people continued to use tables due to expediency, even if it was bad form. (In their defense, some page layouts were impossible create with early implementations of CSS, especially with cross-browser support)
Today, there are no page layouts that can't be built with HTML5/CSS3 (none I can think of anyway ^*), which means there's no excuse to use tables for a page layout these days. So while there is a valid reason why there was a pogrom against using tables (they were overused for design), we shouldn't be opposed to them being used for content any more than we're opposed to pictures being used as content.
^* Neil Anuskiewicz made a great point in his comment (below) about there still being a use for the table tag in HTML e-mail layout. (This use will still be frowned upon by many as it's "not the right way" to do it, but it works where other stuff often doesn't, and working wins)
Seth Kroger
56,413 PointsWhen you want to present information that naturally lends itself to a a row/column format. Which is pretty much what tables are used for elsewhere and was probably the original intent of the <TABLE> element.
Neil Anuskiewicz
11,007 PointsFor tabular data and for HTML emails. Email is where web browsers were in the '90s so tables for layout...
Alejandro Mesa
9,813 PointsTables just for table content, data for example, not anymore to give your website a certain look, that's outdated.
To give your layout a certain look or design, you can use Floats, Flexbox(CSS3) (this is getting popular and is very powerful) or Bootstrap (my favorite), and probably more , those are the one I know who to work with. :)
Tracy Trathen
10,468 PointsTables are best for data. List of things. Not really meant for anything else really, especially not layout. You have to think of what the tags mean semantically. Web browsers don't expect content that isn't "data" oriented, inside tables. Some use tables for email, but you don't even have to do that any more if you use conversion tools to move your stylesheets inline (Mailchimp has a great tool for doing this).
Neil Anuskiewicz
11,007 PointsTracy, nice, i didn't know such a tool existed then I've not used MC in a while. Do you have links to any of these conversion tools? I'm sure most people would love to not have to deal with coding tables again, ever, well, except for tabular data...
Tracy Trathen
10,468 PointsHi all -- Neil mentioned that he'd like links to the tools I use and I figured others might want them as well, so here's the main one:
http://templates.mailchimp.com/resources/inline-css/
FYI: I still scan and test the finished result when conversion happens because once in a while unusual things can happen. I also save it in a file separate from mailchimp, so if any clients want to reuse the layout/design (and typically they do), I have my "clean" copy (i.e. what I have prior to pasting it into the any Mailchimp editor or the conversion tool). To me it's akin to making changes to a photoshop or illustrator file, and not saving your original (I never edit the original!). The minute you don't save it, or you delete the file, that's when you need it.
Here are a few other Mailchimp specific references:
(This one refers to the link I shared above but is specific to using Mailchimp and the inliner tool): http://kb.mailchimp.com/campaigns/ways-to-build/use-the-css-inliner
This is a short blurb just referring to some tools they offer (links to the tools are at the top): http://templates.mailchimp.com/resources/
These are all for Mailchimp, but I'm sure there are lots of other resources out there for working with other systems.... and probably even for not working within any one system. I have a few articles I've got on my "to read" list related to setting up emails so they are responsive, but haven't had time yet to read them.
Tracy Trathen
10,468 PointsAnd here's some "non-Mailchimp" info about email newsletters (how did these posts get so off topic?):
https://www.smashingmagazine.com/smashing-newsletter-issue-153/
A good email framework to use that covers many bases a lot of us haven't probably thought about: http://emailframe.work/
And a nifty tool for testing email: http://litmus.com/
Hope this helps!
Neil Anuskiewicz
11,007 PointsIt does help and this is on topic, we're talking about the one exception to using tables for layout and you're telling us about tool that eliminates the need to directly use tables even for that. That's something tangible and useful that came out of this thread.
John Rothra
6,711 PointsI agree with you Seth. I have no problem with tables, but it seems that some people oppose them, thinking that other design elements are better and can accomplish the same task. My thoughts are that tables can be quite responsive, they are natural organizers, and, to use an old adage, if it ain't broke, don't fix it. I believe they are ideal for some info, though they can be overused. But due to things I've learned or heard over the years, I wanted to get the thoughts of those on Treehouse.
Neil Anuskiewicz
11,007 PointsNeil Anuskiewicz
11,007 PointsYou MUST use tables in HTML email layouts. It's not optional. It's literally the only thing that works.
Tracy Trathen
10,468 PointsTracy Trathen
10,468 PointsI should clarify that I do not do tables when I set up the emails I do for my clients, but, rather, it's a basic div/p/h# tag system and the system I use (typically Mailchimp) then drops them into their tables-based system in order to make them look like my div-based design -- most of my clients use Mailchimp, which works that way. I don't set up any tables on my end... but their system takes my divs either with inline styles and converts them over. So, you DO have to use tables for emails... but Mailchimp makes it easy. Granted, I have been around since the days of tables-based layout so I know how to do it, but it can be pretty tricky to do and I'm glad Mailchimp does it for me.