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.

Table Layout versus CSS Positioning

Even with relatively good browser support for CSS by the majority of browsers used by the majority of Web visitors (with some annoying exceptions), the debate over tables versus CSS still rages. (If you want to know more about it, type table layout versus CSS positioning in your search engine, pull out your reading glasses , and cozy up to your computer screen for some interesting reading.) To determine which layout method is best for you, ponder these considerations:

• If you're accustomed to building sites by using table layout and to maintaining a number of sites that are laid out using tables, you may want to stick with tables for your existing sites but make a vow to try your hand at using CSS positioning in your new sites.

• If you're using a table for layout, try to make it as simple as possible and use as much CSS as possible. You may want to try building a CSS-positioned mock-up along with it so that you can start transferring your skills from table building to CSS. To find out more, take a look at http://www.sitepoint.com/article/tables-vs-css. In this article, the author steps you through the process of building a site by using both table-based and CSS-based design techniques and discusses the advantages and disadvantages of both methods .

• If you're new to Web design and have never used tables, don't start. Spend the time you have to invest anyway into getting up to speed with CSS. Expression Web, with its full CSS integration, is a perfect tool to help you do that. We include many resources for helpful books and online tutorials throughout this book.

• If a table is just the best darn way to present a block of data, by all means, add a table to your page. You use a table for its original intention : to present data in a row-and-column format.

Taming tables with CSS styles

Regardless of whether you add a table to your Web page to organize data or to hold its parts , you can control many aspects of a table's appearance with CSS styles. In fact, using CSS styles for as much formatting as possible helps keep your table code to a minimum so that pages load faster. Here are some tips for using CSS with tables:

• If you're going to use CSS to fine-tune the appearance of a table, consult some good CSS books and Web sites on the topics to get a grasp on the subtleties of table parts and the CSS properties that control them. Cascading Style Sheets: Separating Content from Presentation , Second Edition, by Owen Briggs and others (published by Friends of ED), covers tables in detail. To dive deep into table formatting minutiae, consult the World Wide Web Consortium CSS specification for tables at http://www.w3.org/TR/REC-CSS2/tables.html.

• By default, Expression Web writes sizing values (width and height) for all HTML elements as inline styles, including the <table> element. Because inline styles can't be moved to external style sheets, you should change this setting to write class-based styles. Choose Tools Page Editor Options, and then click the CSS tab. Change the Sizing, Positioning, and Floating option to CSS (Classes).

• Look for table-specific CSS properties in the Tables category in the New Style or Modify Style dialog boxes and in the CSS Properties task pane.

• Be sure to preview your tables in numerous browsers because not all browsers support all table CSS properties exactly the same way.