Going Tableless: Why CSS Should Be Used For Layouts

There seems to be an ongoing battle between web designers about the use of tables in web layouts. Proponents for using tables refer to browser compatibility and quicker design time. While opponents claim that using tables for layouts doesn’t adhere to web standards and web accessibility. In order to better understand how this controversy got started, we need to look at the history of HTML and layouts.

Tables were never intended by the creators of HTML to control the visual style of a web page. They were only meant to display data with columns and rows. There wasn’t a mechanism in place to address the needs of more advanced layouts, so some ingenious web designers discovered that they could use tables to implement robust layouts.

Since that time, web designers have been regularly misusing the HTML language, mainly out of necessity. However, in the late 90′s, the W3C introduced Cascading Style Sheets (CSS). CSS enabled the ability to apply styles to HTML documents. As browsers quickly started to integrate CSS support, web designers started to use it to apply simple styles to their HTML, like font type and color, and background colors and images. However, the robust use of CSS for layouts (in particular, columns) didn’t have wide-spread occurrence until much later.

Over the years, there’s been a steady push to purify how websites are coded. In an effort to create web standards that offer a logical approach, and to provide web accessibility for text-readers, bots, mobile devices, and more, a new standard was created. That standard revolves around the proper use of XHTML and CSS. XHTML should be coded in a way that offers a logical structure for content, while CSS should be used to create a unique visual layout and design.

There are now several reasons why web designers should stop using tables for layouts, and adopt the use of CSS for controlling HTML layouts.

It adheres to current W3C web standards
All modern browsers support CSS for controlling layouts (although Internet Explorer sometimes requires some CSS hacks)
If coded well, CSS makes it easy to apply global changes to the layout
Proper implementation of content into XHTML documents, with the use of CSS solely for style and layout, helps create an accessible website for people with certain disabilities.
Web pages often have less code, and are much thinner when XHTML and CSS are used

The main argument for still using tables today stems from bad habits, and complacency. What is often said is that using tables is easier, and that browsers don’t support it. It can certainly be easier in some cases, but browsers do support it. Internet Explorer can be frustrating to design for, because it doesn’t adhere to web standards very well, but there are many fixes and workarounds that will enable CSS based layouts to render correctly. If there was ever a time to start designing tableless layouts, it’s now.

Resources:

Get results. Get paid. Get with Raven. Free 30-day trial.

Tell us what you think

http://www.mac360.com Bambi Hambi

Using CSS ‘ONLY” for layout is painful, and for the very reasons you state:

“Internet Explorer can be frustrating to design for, because it doesnÃ¢â‚¬â„¢t adhere to web standards very well, but there are many fixes and workarounds that will enable CSS based layouts to render correctly”

And that’s the point. MSIE accounts for nearly 90-percent of all internet users, yet even validated XHTML and CSS produces crappy pages on MSIE.

A full layout in CSS for MSIE? It’s difficult and time consuming and requires multiple hacks. Framing in tables and adding CSS is easy and works well. Unless Microsoft gets with the program for web standards, we still have to build ‘around’ them to make sites look good.

Bambi Hambi
Mac360.com
http://blog.art-app.com miscblogger

I’ve been designing web pages since I was in elementary school. I think that’s when CSS just began to become a standard. As a newbie, I was not aware of the robust features that css offers so I stuck to tables. In my most recent websites, I’ve tried to more css and less tables. It is a stuggle but it made my code a lot easier to read and manipulate. I attribute this to frontpage. Like many designers, i started with WYSIWYG editors. Now i just do hard html coding. I totally agree with trying to use CSS only. But I think it will take time to adapt to it.
Spammy Sammy

Using tables for layouts lets you do things that CSS currently doesn’t allow, such as specifying the size of a content sections as a proportional percentage of the available screen real estate.
http://www.wdanielryan.com dryan

well said
http://jroller.com/page/araman anand raman

thanks for the explanation. I almost always used to get miffed by site devs who would enforce css when things could have been achived by using tables. I think one should adopt a balanced viee. Use tables when you need to present data and css whenever you need to modify layouts/

Thanks for the explanation

anand
Ian

Spammy,
CSS does allow percentage sizes. If you specify “width: 30%” on a block-level element, it’ll be 30% of the width of its parent.
kk5st

There is no debate here. A debate presumes there is a modicum of merit to both sides. Tables are the wrong tool for page layout. If someone says tables work better, they just haven’t put in the dues it takes to learn to use the right tool for the job.

As to IE, its shortcomings and silly bugs are generally well known and the work-arounds, dumbing down and hacks are also well known. It is second nature to fix for IE as you go. It takes some experience to recognize which IE bug you’re fighting, but that’s why they pay us the big bucks. If you’re a professional and can’t or won’t work with html+css, you are behind the curve.

CSS1 (1996) and CSS2 (1998) have been around for long enough, and IE6 (2001), bad as it is, offers enough support that there is no sane reason to continue building bloated, inaccessible and hard to maintain sites.

gary
http://www.q1b.com/ Tommi

Nice article. I completely agree on the benefits of using CSS for webpage layout, but eventough tables for layout itself are “bad”, it’s good to remember – tables have their uses.

When you’re developing a webpaged applications that displays tabular data (think Excel), tables are the tool to use. Trying to show massive amounts of row/cell data in divs and css will only give you grey hair.
Allan

You commentors are all lazy and are bad web developers.

I’ve been writing pure CSS layouts that adhere to proper semantics for web sites that are fully compatible with all major browsers including IE 5.5+ for over a year and it’s easier and less painful to accomplish than anything I ever did using tables. It takes a little bit of time to learn, sure, but most of that time is simply taken up UN-learning all the crappy habits and mindset that you pick up wasting your time with tables.

Tables for layout are a hack that are bad for the web. Your excuses for sticking with it are LAME and if the best you can come up with “until MS gets their act together …” you should quit your jobs and go work at recycling plant or somewhere else that doesn’t require you to think and learn new skills.

Seriously children, if you’re still laying out web sites using tables, you’re wasting your time and your clients money. Quit developing web sites. Please. Leave the work to professionals who care about what they’re doing and capable of learning new things.

As for Jon — great article. My only nitpick with it would be the contention that use of (X)HTML is appropriate. After developing in XHTML for a number of years now, I have recently come on board with a growing number of high-profile designers who are switching back to using HTML 4.01 strict.

Some other resources:

http://annevankesteren.nl/2004/02/xhtml-versus-html

http://hsivonen.iki.fi/wannabe/

http://explorerdestroyer.com/

http://www.killbillsbrowser.com/
http://www.lylo.co.uk olly

You non-believers!

After moving to tableless XHTML- and CSS-based design a few years ago, I can honestly say that table-based layout is awkward, clunky and, well, just a *hack* basically. I don’t think it’s easier it all – far from it.

With CSS, your markup (i.e. the HTML) is pure, clean and simple. Typically you have a header, a navigation (using lists), content (usually two or more columns) and a footer. This is standard across a large majority of modern websites. With tables, your markup is so convoluted and cluttered with and tags that it’s difficult to see what’s going on. Not to mention the pain you’ll have trying to redesign your page!

Yes, CSS represents a fairly steep learning curve, but the benefits of learning it proficiently are easily worth it. You have so much more control over your layout, typography and cross-browser functionality. Just buy Eric Meyer’s “Cascading Style Sheets the Definitive Guide” and you’ll be up and running in a couple of days.

The popular argument that IE doesn’t support CSS properly is nonsense for version 5 of IE or later. (which is virtually all versions in popular use). Yes, there are pitfalls (namely the “box model” problem), but this is a known quantity and EASILY avoided if you take it into consideration. As time moves on, virtually all browsers in use will be able to render CSS correctly (we’re not that far from this right now), and those desginers who refuse to embrace CSS will be left far behind.

Check out the CSS3 draft if you want to see how advanced CSS is going to be in the near future.
http://discretelife.blogspot.com Discrete Life

I have tried to do a complete tableless css layout. It is very painful. I employ the middle of the road now. For my basic layouts I use tables, for everything else I use divs.

What is wrong with having one table, 3 trs (header, content, footer), and a few tds in the content tr? This makes life so much easy.
Adam

I’m pretty sure using box model hacks to get a pure-CSS layout to work in IE isn’t standards compliant, nor are hacks ever “the right tool for the job”.
Norm

I am so almost there with you, I can’t completly give up tables though. Two words: horizontal alignment.
http://blog.debajit.com/ Debajit

I’ve been doing pure CSS layouts for a very long time now, and I’ve had no major problems — even with IE — at least problems that could not be circumvented.

I agree with Allan and Olly’s comments. It’s a shame that modern web developers still tout tables as a tool for page layout.

For all the table-lovers, have you ever browsed a web page on a mobile/PDA, or tried to maintain or change the layout of an even moderately complex web-site?
nicola dobiecka

I’ve been making websites for 4 years and I only once worked on a table layout – someone else built it. My experience of that was awful, the layout was so complex I could not see where things went at all.

As soon as I discovered CSS I started using it for layouts. In the beginning I found my resort to tables for easy fixes was due to my lack of ability in CSS.

CSS is definitely much easier than tables once you know how it works.
http://www.ecademy.com Julian Bond

I applaud the move from tables to CSS for gross layout. But, and it’s a big but, the CSS box model is broken and awkward to use. Let’s take a single example. The “Slashdot” layout has been around for years and is used on many, many websites. There is *no* way to duplicate this in pure CSS that works in the same way and degrades as gently as using a single large table. Many people have tried and there are lots of examples of CSS designs that almost work, but they all break. 11 and 13 above particularly, point this out and it’s the float, absolute, relative and horizontal alignment that is damn hard to use and just doesn’t provide all the tools for gross layout.

Now arguably, the benefits of pure CSS layout are big enough that you should design the layout of a new site so that you don’t use design that CSS makes hard or impossible. Let the technology drive the design. At which point I throw my hands in the air, and go “why?”. Did the standards designers never actually build a site with the standards they built? How could they think they were finished when an extremely common layout can’t be done?

So to agree with 11. One big table and CSS for everything else just works, although you give up the ability to swap layouts with a CSS change for things like PDAs and print. But anyone who goes that route has my sympathy.
kk5st

@Tommi #8,
I don’t know from where the idea comes that eschewing tables for layout means that tables are bad. The whole idea is to use well structured and semantic html markup. The table cannot reflect the structure nor the semantics of the page. The table does reflect the structure and semantics of a spreadsheet, or a calendar, or a league schedule, or … .

That a layout is table-less does not imply there are no tables.
–g
Allan

@Julian Bond,
The CSS box model is neither broken nor awkward to use. The Slashdot layout has been recreated using pure CSS. Go look at their source code. The horizontal alignment issue is not an excuse.
Connelly Barnes

I find that CSS is difficult to use for footers and laying out graphical elements in creative (non-rectangular) ways. I find myself constantly switching back and forth between the stylesheet and the HTML and getting lost in all the div tags which are floating around in strange ways. I tried to create a website for work with CSS only, but this ended up being a huge headache and weird bugs show up on the Mac Safari browser. I’ll probably use a CSS-table hybrid for my next site, with tables controlling the columns, header, and footer and CSS for the rest.

For maintainability with this layout I would use a templating system with Python. If I cared about mobile users I could send a different document based on the User-Agent string. I don’t know about accessibility; I’d personally ask a blind friend to access my site rather than mindlessly parrot the “CSS true-believer” gospel.

And finally, since the decision of table-vs-CSS layout is wholly up to you, I encourage you to ignore the fads and holy wars and schisms and do whatsoever you desire. I actually find it rather bizarre that programmers and Web designers act so vehement and try to push others into doing things the “one right way.” It’s like the Britney Spears fanclub and the Crusades all mixed up (Go Java! Go SVG! Go MathML! Go .NET!…). Please for your own sake ignore all the fads, the buzzwords, the popular people at school, the advice of random folks on the Internet, and so forth. Follow instead the path to enlightenment…
http://www.siteunderconstruction.net clevatreva

Connelly

You can use css to make the headers, footers and columns. Take a look a the examples I show on this page:

http://www.siteunderconstruction.net/webdesignpagestructure.php

Trevor
jeffski

Isn’t turning a bulleted list into a navigation menu bar using CSS a hack? Surely the UL tag is for formatting bulleted lists.

Connelly has it right, use what you prefer, there is no right or wrong, either method has its pros and cons.

Most people using web sites don’t know or care how they are made so long as they can get the info/service they want.
http://www.sitening.com/ Jon Henshaw

Good question jeffski. Actually, turning an unordered list into navigation isn’t a hack. The point of using a list for the navigation does two things. First, a menu is a list of options, so it makes sense to use a list. Secondly, it’s an accessibility issue. If you use our SEO Analyzer tool, it includes a Lynx view (Lynx is a text only browser) which shows you what the site looks like to bots and users who use command line browsers.
John

I think using an unordered list for navigation is much more of a hack than using a table for layout. If someone is going to use the argument, “tables were never intended to be used for layout,” then why can’t someone say “lists were never intended to be used for navigation.” If not, why not? A horizontal navigation is a list? I think it’s much easier to imagine a website as a big table.

By the way, why are so many people saying that using a table for layout is a “hack”? Since when is something that works perfectly on every browser with the exact same code a hack?
http://sitening.com/ Jon Henshaw

John, you’re missing the point. It’s about semantics. Navigation is usually made up of a list of items, thus it should go inside of a list. It’s about keeping the HTML clean, regardless of style (design).

Tables destroy that and were never intended for that. Whereas modern design techniques utilizing CSS adhere to maintaining semantic structure and keep the style separate from the actual content.
John

I didn’t miss the point at all, but obviously you did. I was just implying that you have double standards when it comes to coding.

In your article, you said, “Tables were never intended by the creators of HTML to control the visual style of a web page. They were only meant to display data with columns and rows.” And then in response to jeffski’s statement, “Surely the UL tag is for formatting bulleted lists,” you turned around and said, “The point of using a list for the navigation does two things. First, a menu is a list of options, so it makes sense to use a list.”

See what I mean? You seem like you want to have your cake and eat it too in this situation, don’t you think?

In response to your saying, “a menu is a list of options, so it makes sense to use a list,” someone can just say, “a website is just a big table of data, so it makes sense to use a table.”

A list was never intended for navigation. It wasn’t even possible to make a horizontal list with the *ul* *li* */li* */ul* construct until recently. A list was intended for a list of items within the content, just like you see in a Word document, and in your very own article. The navigation is usually not part of the content.

(By the way, you can make an excellent vertical or horizontal navigation using just *a* tags. A list isn’t necessary at all.)

While I’m at it, I’ve long since gotten tired of people saying, “Tables were never intended by the creators of HTML to control layout.” Woopie do da day! The Internet was never meant to be the greatest source of unlimited free music in history either, but it happened. Tables were once the only option for creating any decent layouts for websites. People used them. Website browsers evolved along with table-based websites. You can argue all you want against using tables in websites today, but please don’t use “tables were never meant to control layout” argument. It’s lame.

Anyway, regardless of whether you decide to use *div* tags or *table* tags, you are going to be developing a table structure for your site. It’s just that with the *DIV*, you are using floats to make the DIVs behave like a table cells. And in case you haven’t noticed, tags within the table construct can be controlled through CSS, as well, so you can make global changes to your site just the same.
http://sitening.com Jon Henshaw

You seem to be nitpicking my blog entry and comments and still missing the point. It’s all about semantics and presenting your data correctly. I didn’t talk much about semantics in the entry, but that’s because I wrote it in 2005 and I now have a much clearer view of the issue — although I still believe that everything I wrote is still correct today, it just needs to be updated.

Indeed, as you stated, anyone can make an excellent vertical or horizontal navigation with just anchor elements, but that would still be an improper implementation. In the same way tables shouldn’t be used for layout (as they were never intended to be). There’s no argument that there’s a hundred ways to skin a cat.

The entire reason why HTML has headers (h1, h2, etc…), paragraphs, lists, etc… is because of semantics — providing hierarchical structure and meaning to content. The entire reason why CSS was created was to maintain separation from the data (HTML) and the style (CSS). Hence, why you should always name your CSS IDs and Classes by layout and function and not class=”red” for text that you want to be red or id=”header1″ for a paragraph that you want to look like a header.

To further make my point, you will have to view and compare a site coded with tables for the layout and a navigation menu made entirely of just anchors against a site that is properly coded. You can do this by using our SEO Analyzer for Web Design. When you run a report on a website, it gives you a Lynx view (a text-based browser). 99% of the time, a site that’s not properly coded will look like crap, because it’s not semantically oriented.

The other reason, beyond what’s proper, is that semantically oriented coding will generally perform better with search engines, because you’re communicating clearly with their algorithm what the page content is truly about.

There are many more reason why you should code a layout without tables. One is that it can create a clusterf**k of nested tables which makes it nearly impossible to easily change or tweak the design (osCommerce is a good example of that). It’s also harder for software developers to work with. I have yet to meet and work with a programmer who preferred working in a table-based layout. Most programmers have shown appreciation to me, because the code is so much cleaner to work with. Probably one of the best reasons to code properly is that it’s much, much easier to make quick global changes and tweaks when the layout is formatted using just a few DIVs.

There are more reasons than what I’ve stated, but those are the biggies. Also, it’s going to become increasingly harder for designers (who code HTML) to get hired by Web development firms if they’re still building out websites with table-based layouts. I don’t know of any reputable firm today that would hire them, and as soon as we see code from an applicant that used table-based layouts, their resume is immediately trashed.
http://rasadesign.com Sean Rice

Actually, as much as the TABLE tag was never intended as a layout mechanism, it was never NOT allowed and it is incorrect to say that ‘web standards’ prohibeted the use of tables in layouts. Quite the opposite is true. Two articles worth noting brings the whole debate between table and tableless designs and they are aptly promoted as “The Reality Check”:

http://joeclark.org/book/sashay/serialization/Chapter10.html
http://css-discuss.incutio.com/?page=TablesVsDivs
(Joe Clark’s chapter is actually referred to by Eric Meyers in the second link).

Given all that, the reason our firm spent so much time rewriting osCommerce to produce CSS / XHTML tableless designs wasn’t due to web standards. It was purely having to do with being able to deliver Search Engine Optimized sites by having the information presented in a semantic, logical order that made sense.

All the whining about not being able to produce cross browser compatible designs with tableless structure has more to do with a lack of skills than the real reality on the web. Flexible widths, 2-, 3- and even 4-column layouts as well as grid-like displays of product listings are completely doable with CSS tableless and we use those techniques with great result in the search engines.

For all that we are promoting “Tabless CSS osCommerce”, however, there are certainly a lot of tables on many of the pages that don’t really matter to us: Checkout, Account Management, Shopping Cart, the entire admin section… And why not? Tables are still better for form control and, at least in the pages that we don’t want google to index, anyway.

But, in any case, the idea that tables are not part of web standards is a myth even where tables are used for layout purposes.
Stephen Korossy

If you use tables for layout your

1) A Noob
2) Lazy

It is that simple.
Pete

As long as there is m$ explorer css-layout is a real PITA. No min-width, max-width, broken behavior, etc.

It’s a fact that tables are bad semantics but they just work. And you don’t have to fix your css fix every new release.

I consider sticking with CSS for everything and using obscure browser hacks and conditional comments and stuff as equally bad as using tables for the whole layout and everthing else. CSS is in the same stage that HTML and javascript was a few years ago. So you should be pragmatic, not religious, and use what works best.
http://sitening.com/ Jon Henshaw

Pete, this has nothing to do with religious convictions about design, it has to do with coding correctly. If you’re having to use a bunch of hacks to make your layouts work in CSS, then you’re probably doing it wrong. I rarely have to use hacks, nor do I need to constantly update my CSS code. The most I usually use is a conditional comment to make IE 6 and IE7 behave.
tigerwiger

I find it funny that people are throwing around heated insults at one another such as “noob” and “lazy”. As if that is supposed to make us want to change our methods.

I agree that lists were never meant for horizontal navigation. It is a hack. You can justify it by calling it “semantics” but it is still a hack. Similarly floating and aligning block level tags is a hack.

Thats what we are all doing. Thats what real web designers do. They dont throw around childish insults. They use their creativity and wit to overcome problems.

And when there is ’100 ways to skin a cat’ they identify that people use what works for them, not preach that their method is best and everybody else is a wrong lazy noob.

If two people come up with a working design, one using tables one using CSS – who is to say mine is better? – if they both suit the clients needs?

You look at reasons why to use CSS instead of tables. 80% of them are to do with ‘standards’ and using things for what they are ‘meant to do’.

Are we supposed to throw away something that works because we are not ‘complying’? Who is to say what is right or not.

The REAL points for using CSS are accessibility, seperation of content from presentation, easier to redesign and faster loading times.

It has nothing to do with whether or not something was meant to do it.

And you can still capitalise on the many advantages of CSS and still use tables for layout.
I use tables and I can change the entire look of pages in one place and in less than a minute.

Why? Because table cells can use ids and style sheet rules and formatting also. Much like divs can.

The only thing you cant do is change the layout of elements in the web page.

Many CSS preachers brag about how you can change the entire design of a page in one place. How realistic is this?

The CEO walks into the office and says “I now want the footer to be a floating box at the right of the page.”

In many cases this is limited and will result in a redesign for most pages.

By using tables you will restrict your site from the few users that use mobile phones or text readers.

By using CSS you will frustrate people who use different browsers and screen sizes.

I use an 800×600 resolution and too many websites out there involve excessive horizontal scrolling. The answer by web designers is “Change your resolution or go elsewhere. Less than 5% of people use that resolution so why should I change my site to suit them?”

And these are the people who use CSS so they can target the less than 1% of people who would use a mobile phone to access their site.

I use both tables and css. I am not lazy, nor am I a noob. I am after something that works for as many web browsers as possible and in as many resolutions.

Having nested divs that drop down or overlap looks very unprofessional.

It is ironic: html was never meant for presentation and layout, only content. CSS was introduced to give you control over presentation and layout. Yet with different browsers and screen sizes the only thing you can be certain will get to the end user is content.

If presentation and layout is optional then why spend hours designing it? Isnt that a waste of company funds? Why not have a simple header and a slab of text?

If your presentation and layout is important then it is vital that gets to the end user. And if you need tables to ensure that an image will be vertically aligned down the center of equal length columns then so be it.

Use what is best for you and what works for you.