From table-based to tableless web design with CSS – Part 1: CSS Basics

CSS versus table-based layouts

Tables seem so easy because we're familiar with the concept quite apart from web page design. Most of us used Excel spreadsheets or Word tables before we tried to put together our first web pages. The idea of putting content in cells seems intuitive. Still, though tables work well for data, there are disadvantages to using them for layout, a purpose they were never intended to fulfill.

I remember a few years ago when I was called in to advise a company that purchased a Dreamweaver template that had been designed with tables. There were many row and column spans to this carefully constructed house of cards. The problem started when the webmaster tried to make edits to various cells. If the new content made the heights of the cells vary too much from the originals, the construction started to fall apart. Size adjustments in one cell affected surrounding cells. Gaps appeared between images that were supposed to be precisely aligned. Perhaps table designs are not really that easy after all. In CSS layouts, the building blocks have more independence. There are many other advantages as well:

• Separation of content and presentation: The content goes into the HTML document and the design goes into the CSS document. It is easier to read the code, both for you as you work and also for the browser as it renders the page.
• Portability to other media: The simpler code and separate style sheets allow you to easily port pages over to print, screen readers, mobile devices, and other media.
• Lower page weight: When browsers can download the style sheets once and apply them repeatedly to multiple pages, the pages download much more quickly and reduce the burden on the server.
• Quicker redesigns: Because just the content and basic elements are in the HTML document, it is easy to redesign by simply switching to a new style sheet. For a famous example of one HTML document that is presented in hundreds of ways with the swap of the style sheet, see CSS Zen Garden.
• More possibilities: With more independent building blocks and the potential to break outside of the box, CSS layouts open themselves up to more creative treatments.

The same and different

It is always best to start with what you know, and surprisingly, there are quite a few commonalities in the table and CSS approaches to layout. Tables and CSS layouts start with the same raw material. Consider the simple page shown in Figure 2, which could provide the basis for either a table-based or CSS-based layout.

Figure 2. A simple HTML page contains all the raw material you would use in either a table-based or CSS-based layout

The raw material of this simple page includes features that will be common to both kinds of layouts:

• Headings, links, images, paragraphs, and other HTML elements provide the foundation for page content.
• HTML elements appear on the page as either inline or block; that is, they stack either horizontally or vertically. Examples of block elements are headings and list items. Once the content in the heading or list item is rendered, the space next to it remains free, and no other element fills that space. Examples of inline elements are characters of text, images, and links. Once an inline element is complete, the next element you insert will sit right next to it.
• Elements have a natural flow. The text, images, links, headings, and other elements appear on the page in the order that you insert them. They flow across the page, wrapping to the width of the user's browser window.
• HTML elements appear as they do (such as heading sizes and fonts) because each browser provides base style sheets. You need to work with, or around, these base style sheets in either layout approach.

This simple page represents what the web looked like a long time ago before designers figured out ways to manipulate the natural flow of an HTML document. In order to give pages more visual interest, designers first thought inside the box by using tables as grid structures for their content. With CSS positioning techniques, however, they finally got to think outside the box. CSS layouts still use building blocks, but these boxes enjoy more independence from one another. The structure is less rigid, and the creative possibilities are positively liberating!

Page 2 of 11

Previous Page

Next Page