Next / Previous / Contents / TCC Help System / NM Tech homepage

18. Tables

CSS allows you to format elements as a table. A table consists of an optional caption and one or more rows and columns. Each item in the grid is called a cell. Additionally, you can combine multiple rows into row groups that share style features, and you can combine multiple columns can into column groups.

You can designate one or more rows at the top of the table as a table header group. You can also designate one or more rows at the bottom as a table footer group. When a table has a table header group or table footer group, and the table is rendered on paged media, the header group and footer group will be repeated at the top and bottom of each page, so the reader can see what the columns mean.

To present some element of your document act as one of these parts of a table, set the display property for that element to one of these values:

table

Renders the element as a block containing a table.

inline-table

Renders the element as a table, but encloses the entire table in an inline element, so it can be placed on a line with other inlines.

table-row

The element acts as one row of a table.

table-row-group

The element is presented as a row group.

table-header-group

The element is a group of header lines.

table-footer-group

The element is a group of footer lines.

table-column

A rule for a table-column does not actually render any content. Such a rule can, however, carry properties that can be inherited by the cells in that column.

table-column-group

Like table-column, a rule with this display value does not render content, but can carry properties to be inherited by columns in the group.

table-cell

The item is rendered as one cell of a table.

table-caption

The item is presented as a table caption.

Note

A minimal table consists of a table or inline-table containing at least one table-row, which in turn contains at least one table-cell.

You don't have to supply all these parts to create a table. Any missing parts will be added automatically. For example, if you render a series of objects as table cells, an anomymous table row and table will be created to contain them. Similarly, if you render some objects as table rows, but they aren't inside a table element, an anonymous table will be created to contain the rows.

The various parts of a table render as if they were stacked in this order (from front to back): cells, rows, row groups, columns, column groups, and the table itself. This means, for example, that if the background of a cell is transparent, but its row has a background color, that color will show as the background color of the cell.

18.1. Table column properties

Any elements you render with a display type of table-column or table-column-group may have these properties:

background

If you set up a background for a column or column group, that background will be visible for transparent rows and cells .

border

A column or column group's border property will apply to all cells in the affected columns, but only if the table's border-collapse property has the collapse property. For more information on this property, see Section 18.3, “Table border properties”.

width

The width property of a column or column group sets the minimum size of the column. For table sizing in general, see Section 18.2, “How table size is computed”.

visibility

If you set the visibility property of a column or column group to the collapse value, that column or group will disappear as if it had never existed.

18.2. How table size is computed

The first property that affects table size and layout is the caption-side property. This property can take any of these values:

  • top is the default caption position. The caption appears above the table.

  • bottom places the caption below the table.

  • left or right places the caption to the left or right of the table.

The width of a table depends on the table-layout property. Select one of these two values:

fixed

This layout method starts rendering the table as soon as the first row is complete, so it is a good choice if you have a huge table and you don't want the reader to have to wait for the entire thing to be rendered.

The agent looks first at each column to see if it has a fixed width attribute, and uses that width if it is specified. Otherwise it looks at the first row's cell in that column to see if that cell has a fixed width. Failing that, it distributes the table's width over the cells that don't declare a fixed width.

The final table's width is the value of the table's width property, or the sum of the column widths, whichever is greater.

In the second and succeeding rows, any cells that are wider than the computed column width will not cause the column to get any wider. The overflow property of the cell determines what happens to the extra content.

auto

Rendering a table with table-layout set to auto is more flexible, but a table can't be rendered completely until the agent looks at all the rows.

In this method, the agent computes the minimum and maximum width of the contents of each cell in a column. For example, if a cell contains text, the minimum width is the width of the longest line if the content were broken into the maximum number of lines, and the maximum width is how wide that cell would be if it were rendered all on one line.

The final width of the table depends on the table's width property (which is auto by default.

  • If the table's width is auto, and the total of the maximum column sizes is less than the width of the block containing the table, that total is used. Otherwise, the table's width is the sum of the minimum column sizes, or the width of the containing block, whichever is larger.

  • If the table's width is a specific value, the rendered width is either that value, or the sum of the minimum column sizes, whichever is larger.

The height of a given row in the table is the height of the tallest cell in the row, or the height property of the row, whichever is larger.

The height of a given cell is the height of its content, or the value of its height property, whichever is larger.

18.3. Table border properties

The borders that appear in a table depend on the value you set for the table's border-collapse property. Select one of:

collapse

This is the default. A cell may have border properties set on itself, its row, its row group, its column, its column group, or the table itself.

The actual border rendered at any given spot follows these rules:

  1. If any border-style property that affects the cell has the value hidden, there will be no border.

  2. If any of the relevant border-style properties are none but others are not none, the none property will be ignored.

  3. Wider borders have precedence over narrower borders.

  4. If all the relevant border properties have the same width, the border with the higher-priority style wins. From highest to lowest priority, the styles are double, solid, dashed, dotted, ridge, outset, groove, and inset.

  5. If relevant border properties differ only by their color, closer elements win over more distant elements. From closer to further, the elements are cell, row, row group, column, column group, and the table itself.

separate

With this option, every cell has its own border. Any border properties on rows, row groups, columns, or column groups are ignored.

Two additional properties control the appearance with the separate option:

border-spacing

Set this property to one or two dimensions (see Section 6.1, “Dimensions”). If you supply one value, it will be used for both vertical and horizontal spacing between cells. If you supply two values, the first gives the horizontal spacing and the second the vertical spacing.

empty-cells

This property controls the appearance of cells that don't have any content. (You can use the non-breaking space character,  , to force the appearance of content when there is none.) The default value of this property is show, which forces empty cells to have borders. Set this property to hide if you want empty cells to be displayed as if there were no cell there. If you select hide and all the cells in the row are empty, the entire row will disappear.

18.4. The speak-header property: Aural rendering of tables

When a table is being rendered by a speech synthesizer, the speak-header property controls when table header information (row titles and column titles) is presented. Values may be:

once

Speak header information only when it changes. For example, a row header would be spoken only at the beginning of each row. This is the default value.

always

Speak header information for each cell.