Welcome to the Treehouse Community
Looking to learn something new?
John Rothra6,711 Points
Are 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?
EDIT: 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 Kroger56,403 Points
When 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 Anuskiewicz11,007 Points
For tabular data and for HTML emails. Email is where web browsers were in the '90s so tables for layout...
Alejandro Mesa9,813 Points
Tables 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. :)
Tables 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).
Hi 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:
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.
And here's some "non-Mailchimp" info about email newsletters (how did these posts get so off topic?):
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!
John Rothra6,711 Points
I 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.