Historically, tables contain and lay out data in a grid to make analysis easier. In (X)HTML, however, they serve an entirely different purpose -- to control Web-page layout. Most Web pages contain at least one table -- some even nest tables within tables. (X)HTML tables can present everything from text to images on your pages efficiently and attractively.

Also, CSS provides ample positioning power to give designers flexibility and precision when working with tables -- a killer combination!

This chapter provides step-by-step instructions for building and using (X)HTML tables and then using CSS to control their presentation. Use our best tried-and-true tips and techniques to speed up and simplify your efforts.

At Powered's Web site (www.powered.com), you need scroll down a ways (or search on <table> when viewing the source code) to hit the first table (as with much else on the Web, this page has changed since we last visited and wrote about it)

Page 178, Figure 11-2: Since we wrote this chapter, Google has built a lot more superstructure around the three-cell table on its home page. Careful examination of the source code at www.google.com (as we write this, anyway) now shows they've switched to styles and scripts based around <span> elements and various style classes (gb1, gb2, gbh) for their navigation and selections, and simply use a table to center the Google logo and the search and lucky buttons mid-page. For an interesting exercise, use HTML Tidy (we used it inside HTML-Kit, where it's easy and handy to do so) to clean up the Google home page code so you can actually read it.

Page 179, Figure 11-3: Table basics (display view) (code view)

Page 191, Figure 11-5: Width properties (display view) (code view)

Page 191, Figure 11-6: Width properties defined (display view) (code view)

Page 193, Figure 11-7: Cell-padding (display view) (code view)

Page 193, Figure 11-8: Cell-spacing (display view) (code view)

Page 196, Figure 11-9: Vertical alignment (display view) (code view)

Page 199, Figure 11-10: Column spans (display view) (code view)

Page 200, Figure 11-11: Row spans (display view) (code view)

Page 204, Figure 11-12: Populating table cells (display view) (code view)

Page 207, Figure 11-13: Nested tables (display view) (code view)

.ZIP file of all code samples from this chapter (84kb)

---

Share this page!