Why It s Not Bulletproof

Why It's Not Bulletproof

One of the main problems that table layouts suffer from is a tangling of content and design. In other words, borders, spacer GIFs, and graphics are embedded right in the markup along with the important content. This means only typical desktop browsers will be able to read the page with any great success. Users of screen-reading software, text browsers, or other small-screened devices are likely to have difficulty.

AN ABUNDANCE OF CODE

This tangling can also mean lots of code. The amount of markup necessary to design compelling layouts with nested tables can, at times, be staggering. Unnecessary table cells are used to create gutters (space between columns of text), borders, and other visual characteristics of a page. By using CSS, the markup can be stripped down to its bare essentials, and presentational instructions can be moved to the style sheets. This immediately improves readability on nontraditional devices and software, not to mention being far friendlier to search engines (an additional, free benefit).

A MAINTENANCE NIGHTMARE

All that code and the tangling I've mentioned (I do seem to like that word, "tangling," don't I?) only add to the maintenance nightmare caused by nested table layouts. Changing the look and feel of a table-based design requires much heavy liftingnavigating through table cells and extra markup to change a page's design. It can be maddening, if not at times pointless, with the best option often just to start from scratch.

NONOPTIMAL CONTENT ORDERING

Another downside to creating table-based layouts is the order in which the contents are presented in text browsers and screen readers. For instance, taking a three-column layout, we know that order in the markup will always be left column, middle column, and then right column (Figure 8.2). This is the way tables operate.

Figure 8.2. The (sometimes) nonoptimal ordering of table-based content is left column, middle column, and then right column.

Those viewing with a text browser or screen reader will always digest the content in that order only. But the real meat of the document might not be contained within that first left column. Typically, the important information is held within the middle column, which would be buried further down the page. When using tables for layout, it is impossible to source-order the layout, an arrangement that allows the important content to be read first in alternate browsers and software. There is one order for all devices, which forces text and screen readers to wade through less important content before getting to the good stuff.

Fortunately, CSS-based layouts do allow for that reordering, enabling your document's source to be marked up in an optimal order but presented in another. In addition, far less code is required, as well as a simple separation of content from presentation. Let's move on to start building fluid, multicolumn layouts using CSS.