Chapter 11. Table Layout

You may have glanced at the title of this chapter and wondered, "Table layout? Isn't that exactly what we're trying to avoid doing?" Indeed so, but this chapter is not about using tables for layout. Instead, it's about the ways that tables themselves are laid out within CSS, which is a far more complicated affair than it might first appear. That's why the subject warrants its own chapter.

Tables are unique, compared to the rest of document layout. As of CSS2.1, tables alone possess the ability to associate element sizes with other elementsall the cells in a row have the same height, for example, no matter how much or how little content each individual cell might contain. The same is true for the widths of cells that share a column. There is no other situation in layout where elements from different parts of the document tree influence one another's sizing and layout in such a direct way.

As we'll see, this uniqueness comes at the expense of a great many behaviors and rules that apply to tables, and only tables. In the course of the chapter, we'll look at how tables are visually assembled, two different ways to draw cell borders, and the mechanisms that drive the height and width of tables and their internal elements.