Layout: Tables or CSS?

Originally posted at: http://homepage.mac.com/faucon/Design/layout_choice.html

HTML purists (& the W3C) frown upon using html tables to achieve page layout & design. However, the layout power of a table has been exploited since the 1990's to create visually interesting page designs. CSS was supposed to free us from the inappropriate use of html for layout. But, CSS has it's limitations.

Comparison

This section added 2004-05-23 (May 23, 2004).

Tables and CSS are different. They are different tools, suited for different tasks. Learn to use them appropriately.

Tables	CSS
Intended to display tabular data. This could be data (experimental, computer, etc.), rigid forms, and any other information where the layout is part of the information, crucial to it's content and meaning.	Intended to apply style to (any) all elements in an HTML document. Style is independent of content.
Coded directly with other content of a document.	Many ways to attach & apply style sheets (separate file) to one, or several documents. Potentially allows users to choose from several alternate style sheets for the same page (the Mozilla browser already has this option). Makes it simpler to change the look / style / layout design of many documents on a site, just by changing the style sheets.
Design is distributed (redundantly) throughout all pages in the site. All the layout code from the table must be downloaded with each page, but only as much as is present within the document.	Site design could be potentially "front-loaded", where all the style sheets must be downloaded with the first page. However, once downloaded, style sheets are then cached, and don't need to be downloaded again for the rest of the pages on the site. Designers may wish to limit the style sheets required and downloaded for the first page of a site, thus allowing this important front page to load faster. If the user chooses to visit more pages in the site, the required style sheets can be downloaded when they are needed. Or, keep the style sheets short & simple, thus reducing overall file sizes needed to download.
Rigid layouts (relatively).	Fluid layout (much more fluid than tables).
User has no control over layout.	CSS negotiates with the user to decide how to apply a style sheet. The user always has the last say about how to display elements. An extreme case is a user's custom style sheet, ignoring any style sheet specified within the document. Designers may not like this, but it allows users with special needs to control how they access the content. e.g. larger fonts, or certain color combinations to enhance readability (custom line-lengths, etc.). This can ultimately allow the content to be more accessible.
Widely supported by almost any browser (even the older ones).	In practice, CSS is only supported by newer browsers, sometimes not fully, and each has its own bugs.
Many Techniques widely used and time-tested for over a decade.	Many creative techniques described, and tested, though usually complex. Continually developing. Forward-compatibility may be uncertain.
A practice started in the early days of graphical web design, tables are often exploited to create the layout of entire documents by placing content within the table structure. Complex layouts often require nesting tables within tables, or combinations of colspan and rowspan attributes.	Complex layouts sometimes require extra tags within the document, but these can have semantic value (e.g. dividing obvious sections of a document), but hot nearly as many tags as tables require.
Easy to understand the concepts (if you're used to working with tables). Nested tables & tags can be confusing and difficult to figure out.	Must learn syntax, box-model, etc. - but it's all explained in the standards, freely available from the W3C. Can be confusing, if you're used to working with tables, but some find it makes a lot of sense (once you get used to it). The most frustrating and time-consuming aspect is coping with all the browser bugs and varrying levels of support. The best advice I can give is that you can't design with CSS the same way you would using tables. You have to think more fluidly, and you can't expect your pages to have the exact same, pixel-perfect layout in all browsers.

From Tables to CSS; standard problems

Since the 1990's, web designers (professional, and amateur alike) have been using html tables & nesting tables inside tables to position graphical and content elements on a web page. How else could you have a 3-column text layout, and position bits of graphics around text?

Cascading Style Sheets (CSS) are supposed to allow us to do what html was intended for: separate content (html) from format (style). The standards intelligently designed by the W3C are elegant and powerful. Unfortunately, they were not truly standard when first written, as many browsers did not support the full CSS specification. For more info, see the WaSP for a slightly longer description of the problem with web "standards".

So, where does that leave the amateur web designer? I still need to make a page, and I have creative energy to channel into my page design. What should I use, tables or CSS? Well, I recognize the benefits of using CSS and have decided to switch over. I really like the power of the standard, and the benefits, so I have decided to use it. After many hours of frustration, I have developed an approach to limit the browser bugs I need to address. Older browsers may see my pages as boring, without any CSS layout, but at least they are readable. Such pages are also more accessible to screen readers and people using other special software to help overcome visual impairements, faster to download (without extra code & spacer graphics), and easier to maintain and manage content. For other benefits, see the W3C.

I think it's absurd (but understandable) that html elements like tables are more stable & widely supported than CSS layout tools. CSS may simply be too new to become well established in browsers, but a standard is necessary to make web design practical. Standards mean I don't have to test or write special workarounds for separate browsers that read the same code in different ways.

The W3C and html purists frown on using tables to achieve layout for an entire page. They were intended to display tabular data. I've read many articles online re-enforcing this notion, so I decided to abandon the table for page layout. Unfortunately, this has meant that it takes me significantly longer to design a page, because I have to test CSS code and sift through lots of code to fix bugs, and test on a few platforms. But, I end up with a very flexible design, and pages that are sematically and structurally sound (and valid!). However, I have often wondered if having a "valid" document & CSS is worth all the extra time, when it ultimately results in pages that are less exciting on older browsers, and all the extra time & frustration it takes.

I have committed to an approach of separate content from style, because I believe it makes more sense from the perspective of publishing documents for others to view. HTML (or XHTML, see the W3C for more info) and CSS are a powerful combination allowing the same content to be displayed in a dynamic fashion, in different media types. CSS negotiates between the designer's intent, and the needs of the user. For example, some users need larger text to read - CSS allows the user to override the designer's format to allow one that is more accessible to the user's needs. This is why the <font> tag is so dangerous in html; not only is it not a real html tag (it's an extension supported by many browsers), but it does not allow the user a say as to what the browser will do with it, unlike CSS. There is really no good reason to use the<font> tag, since CSS is a much better way to format text and is generally much better supported in this respect. On the other hand, layout is another story altogether!

The right tool for the job

The internet (specifically, the World Wide Web) has evolved to be quite different than what was originally envisioned. It has become a powerhouse of marketing and business enterprise. At least, in developed countries. Anyway, the point is that the internet is no longer simply a tool to post documents to read. It is used by companies to sell things, manage information, and run "internet applications". In this setting, it seems to me that content can not be easily separated from format. In many respects, the two are very much inter-dependent, such as from a marketing perspective, or when designing an internet application. In this case, it does make sense to me to use a table, or other html markup to rigidly structure the layout of a page. The layout and style of these pages need to be stable across many different platforms, or the content will be lost. In this setting, pages are no longer simply documents to be posted for others to read - they are locations where users can interact with the content. And the content includes the graphics, layout, and formatting of every pixel in the browser window.

Conclusion

My conclusion is that if you want to use the internet to sell things, or to create a visual environment that is stable across multiple platforms & user agents, using tables for layout makes a lot of sense. It just means people with visual problems may have problems getting your message. But, this is a relatively small sector of the market for most businesses, and there are other alternatives for accessibility. If you want interactivity, that's what flash is for (or other technologies). But, if you want to publish documents, the W3C standards model of XHTML & CSS is a powerful combination. Perhaps what this eludes to is a need for the world wide web technology itself to change into a structure that is more suitable to interaction among users, and between users and their content. But the task of designing the future of the internet I leave to the professionals, and the needs of the users. I pray that it is not dictated to us by Microsoft.

Related Links

• Tables My Ass
• An Objective Look at Table Based vs. CSS Based Design