ARTS & FARCES internet

I thought the tables v. full-CSS issue had been settled in the favor of full-CSS long ago. But I keep bumping up against resistance to the use of full-CSS page layouts in Web design. So, here are eight notes to myself about why full-CSS is far superior to using tables for Web page layouts.

1. Accessibility: For textreaders, a page’s intended layout—which is obvious to sighted users—is far from obvious, especially if the user has to find her way through layers of nested tables to reach the content. This is also true for users of non-computer devices (smartphones, PDAs, and devices yet to come). Sooner or later someone’s going to get sued over this issue. Oh, wait, someone already has.
2. Search engine visibility: Many search engines grab the first 20-30 words of text they encounter and use that for the description of the site. Whatever is contained within the top left table cell becomes the page’s description. CSS allows absolute positioning of page sections, allowing the page’s main content well to be placed first.
3. No spaghetti code: Properly laying out a page requires all kinds of specifications: text alignment, margins, leading, line lengths, etc. When tables are used, all of these specifications must reside in the tags, resulting in code that is hard to read, difficult to maintain, and virtually impossible to enhance. Tables are for tabular data, not page layout.
4. Code is separated from content: As stated above, the table-based layout spaghetti code is embedded within the content. With a full CSS-based layout, code is separated from content. This makes redesigns much easier as many times all that’s required is editing of the .css files. For an example, see the CSS Zen Garden Web site.
5. Improved page load times: HTML is much more compact with full CSS layout control than with tables (plus the .css files are cached on the server, loading even faster). This can dramatically reduce page load times. This isn’t as apparent on the University network but is appreciated by those accessing the server from outside.
6. CSS can be turned off: If the page is designed semantically and CSS is turned off or overridden, the page degrades gracefully with the content still being displayed in the appropriate hierarchy and in an accessible manner. Tables cannot be turned off; if the page doesn’t render properly, there’s nothing the user can do about it. Similarly, different classes of users can specify their own CSS, overriding the page’s settings to make text larger, etc.
7. CSS is more powerful: Margins, absolute positioning, line spacing, etc. are all relatively easy to code in CSS. Better yet, the code resides in one place, so changes and updates are just as easy. Overlapping layers are impossible to code in a table-based layout, yet can be implemented with CSS.
8. Browser support: CSS is partially supported by Internet Explorer 3.01 and later, Netscape 4.6 and later, and Opera 3.6 and later. Internet Explorer 5.5 and later support more than 90% of the CSS-1 specification; Netscape 6 and later and Opera 5 and later support more than 98% of the specification.