Chapter 10: Tables for Data (And Layout, If You Must)

Overview

Before CSS, designers had to use tables if they wanted to arrange chunks of text, pictures, and even other tables in a graphically pleasing way. (For an example of a Web page laid out with tables, see Figure 10-9, later in this chapter.)

By the time CSS made its debut on the Web-design stage, table-based layout was well established as the method that consistently delivered a solid performance. When you take a peek at the source code behind some of the biggest and longest-standing sites on the Internet, you notice that tables are holding all those fancy bits in place.

For the past few years, however, the move has been toward using tables mostly for data and letting CSS do the formatting. Several reasons are driving this shift:

• Build a Web site with tables for layout, and your HTML code clogs up with a tangle of code bits that tell the browser not only what to display but also how and where.

• With Web content moving beyond the Web browser to other viewing devices, CSS builds a strong case for keeping formatting information out of content.

• Another problem is accessibility. Screen readers (devices that make Web pages readable for people who can't view Web pages in standard browsers) stumble awkwardly through pages laid out using tables.

• Table-based page layout violates a fundamental goal in the push for Web standards: to separate content from formatting.

Web design practices now stand at a crossroads. CSS is no doubt the future, and it will eventually replace table layout as surely as the automobile replaced the horse and buggy. Even so, you may still need to understand table layout if you're working with an older site and don't have time to bring it up to CSS standards. Tables continue to be a useful way to present data. And, if you have a fairly simple site and you know that problems accessing your site with a Web-enabled phone, screen reader or other device won't be issues for your audience, table-based layout is also, frankly, easier to master than CSS layout, so you can get your site up much more quickly.

In this chapter, we cover how to build and format tables, for both data and Web page layout. Yes, you should lay out your Web pages by using CSS, just as you should floss your teeth every night. But CSS positioning isn't something that you can get up to speed on in an hour. Take a look at the next section for some guidelines for deciding which layout technique you should use.

REMEMBER 

When we say data table in this chapter, we mean a grid of static information lined up in rows and columns, not a data-driven Web site.