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.