Tables for Data (And Layout, If You Must)
Before CSS, designers had to use tables if they wanted to arrange
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
, 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
to display but also
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
a fundamental goal in the push for Web standards: to separate content from formatting.
Web design practices now stand at a
. CSS is no doubt the future, and it will eventually replace table layout as surely as the automobile
the horse and
. 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
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
lay out your Web pages by using CSS, just as you
floss your teeth every night. But CSS positioning isn't something that you can get up to speed on in an
. Take a look at the
section for some guidelines for deciding which layout technique you should use.
When we say
in this chapter, we mean a grid of static information lined up in rows and
, not a data-driven Web site.