Use CSS Instead of Tables

Web Standards: Designers Should Use CSS Instead of Tables

Ever since the Web Standards Project (WaSP) recommended the use of CSS rather than tables for website layout, web designers began focusing on using style sheets for their website designs. Section 2.1.3.4 of the standards FAQ document is titled CSS - Cascading Style Sheets, and recommends that stylesheets should be used "consistently" to define the website's appearance. The project recommends phasing out older layout-specific features and replacing those with cascading style sheets.

What is CSS?

Cascading Style Sheets (CSS) is an Internet programming protocol that formats the appearance of various elements within a web page by assigning style values within the HTML or XML. For example, you can use style sheets to define things like how all list items will be displayed, the margins and padding for all headers, or the font and line spacing for text within various blocks content. The flexibility of CSS is impressive, and the fact that it allows you to reformat hundreds of HTML web pages with a single change in one .css file makes it a tremendously powerful tool to manage websites.

CSS in its simplest form includes a .css file and an index.html file. However, designers can add several .css files and those .css stylesheets are called within the web page "head" section with the following code:

Within a css file, the properties of various elements within the html page are defined as follows:

Finally, within the html file where this stylesheet is being used, everything within the "div" tags that call this element are formatted as defined above. The element is called in the web page as follows.

The power of this technique is that any time a particular formatting style is required, you can simply call that element using the "div id=" call to format the content.

Why Using CSS is Better Than Using Tables

A simple example of the major difference between CSS and tables is in the case where a designer needs three columns of text neatly formatted and evenly spaced from the center of the page. CSS allows you to create content blocks, using the "div" sections, to create those three independent columns. The stylesheet defines the margins, formatting, and placement of those columns. On the other hand, a table used for the same purpose would require a careful placement of the table, and difficult manipulation of columns and rows in order to accurately place those columns where they are desired. Unfortunately the content and behavior of each part of the table has an effect on other parts of the table. This is why formatting a page with tables can be much more difficult than through the use of stylesheets.

Additionally, even if you manage to properly format a page using a table, and then you reuse that table design on 10 or 20 pages, if you ever decide to make a change to the format or style of that table, you will need to edit all 20 pages to replicate the style change to all of them. In the case of CSS, you make one single edit in the .css file and the formatting change is replicated through all of your web pages, whether there are 20 of them, or hundreds of them.

Are Tables Used Anymore?

The subject of whether tables are a thing of the past is highly debatable. Tables continue to serve web designers well when it comes to smaller elements within content. For example, placing a picture and text in a nicely formatted paragraph as part of the content within a "div" section remains a very common approach. This is because a simple table can quickly format the content while leaving the surrounding content above and below it untouched. Even though CSS has removed a table's usefulness for overall page design and format, the table still has value when it comes to formatting smaller sections of content on an individual page, where the formatting is unique to that content, and isn't used anywhere else on a website.

Learning How to Use CSS

Learning how to use CSS instead of tables is very easy. There are numerous tutorials across the Internet, as well as books and resources at your local library or bookstore. Some great online tutorials include the following.

• Quackit has a large library of CSS tutorials.
• CSS Tutorial offers a very simple 3 part tutorial on CSS.
• Smashing Magazine offers an entire website devoted to learning CSS.
• HTML.net provides visitors with a comprehensive free CSS tutorial.

Whether you are a new web designer, or a veteran, CSS is now the new web standard, and any serious web designer needs to understand the power of Cascading Style Sheets and how they need to be used appropriate in the process of designing any website.