How Tables Are Used

Today, I explained the usage of tables in publishing tabular data. That was the original purpose for HTML tables. However, Netscape 2.0 introduced the option of turning off table borders, and this, along with other limitations in HTML, changed the way tables were used.

Before style sheets were invented and implemented in most browsers, there was only one way to lay out elements on a page other than straight down the middletables. Every time you see a page that has navigational links running down one side or elements enclosed in boxes with a background of a different color, someone has laid things out using CSS or tables, and usually it's tables that have been used. In fact, tables were once such a huge part of web publishing that it was rare to see a page that didn't contain any.

Even though all current browsers provide solid support for Cascading Style Sheets, you'll still find that most pages are laid out using tables. Because, as you'll see tomorrow, CSS fundamentally changes the way pages are laid out, many people haven't bothered to get current and abandon tables. Furthermore, there's still some concern about making pages look the same in old browsers as they do in new browsers. Old habits die hard, so tables are still a common approach for creating complex layouts. Let's look at a page that uses tables for layoutfreshmeat.net (a site that keeps track of new releases of open source software). It's a good example because it uses several clearly marked tables with nice bold borders. The page appears in Figure 8.31.

Figure 8.31. The freshmeat.net home page.

The first four rows of the page are all tables, the first containling links to related sites, then one containing an ad, one containing navigational elements, and one containing the search fields and even more navigational links.

The main content of the page is presented in a table that appears to be two columns but is actually seven columns wide. Two of the columns contain contentthe list of software packages on the left and the navigation on the rightand the rest of them are used for spacing and formatting. The listings for individual software packages in the left column are also tables, and the tabular data at the bottom of each listing is yet another table.

This page illustrates the problems with laying out your page using tables. As you'll see later, using tables means including lots of tags on your pages that wouldn't be necessary if you used a CSS-based approach. You also lose the meaning of what a table is, as most of the tables aren't used to present tabular data, but rather just to make things appear on the page where you want them.

This type of layout was typical, but most new websites are being created using CSS for page layout. As you can see from the freshmeat.net page, tables can be used for a very precise layout of the elements on a page. The best way to learn how to create your own pages using these techniques is to view the source code of pages you like. It's unethical to copy someone else's code directly, but there's nothing wrong with using other people's HTML as a source of inspiration or instruction.

Tip

Before you start venturing into using nested tables to create solid borders and resorting to other such trickery, remember that Cascading Style Sheets enable you to create layouts exactly like those on the freshmeat.net page in a much simpler manner. You'll learn exactly how this is done tomorrow.