CSS: The Definitive Guide, 3rd Edition

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 elements—all 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.

Table Formatting

Before you can start to worry about how cell borders are drawn and tables sized, we need to delve into the fundamental ways in which tables are assembled, and the ways that elements within the table are related to one another. ...