Tables

Perhaps as a result of a generic need to be able to describe table layout—something CSS1 lacks—CSS2 includes a handful of features that apply directly to tables and table cells. First, there are 10 new table-related values for display :

table
inline-table
table-column-group
table-column
table-row-group
table-row
table-cell
table-caption
table-header-group
table-footer-group

While the effects of most of these are obvious from their names, at least two may not be familiar to you. table-header-group and table-footer-group are used to mark the header and footer of a table. These are displayed, respectively, above or below all the rows of the table, but not outside of the table’s caption.

Another interesting effect is that you can align text on a character by using the text-align property. For example, if you wanted to line up a column of figures on a decimal point, you might declare:

TD { text-align: "." }

As long as a set of cells are grouped into a column, their content will be aligned so that the periods all line up along a vertical axis.

Far from relying on existing properties, CSS2 provides a whole array of brand-new properties in the table section. Here are a few of them:

  • border-spacing, which influences the placement of borders around cells

  • border-collapse, which can be used to influence how the borders of various table elements interact

  • table-layout, which tells the browser whether or not it can resize the table as necessary

There are also properties describing how visibility ...

Get Cascading Style Sheets: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.