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
property for that element to one of these values:
Renders the element as a block containing a 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.
The element acts as one row of a table.
The element is presented as a row group.
The element is a group of header lines.
The element is a group of footer lines.
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, a rule with this
display value does not render content,
but can carry properties to be inherited by columns
in the group.
The item is rendered as one cell of a table.
The item is presented as a table caption.
A minimal table consists of
containing at least one
in turn contains at least one
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.
Any elements you render with a
table-column-group may have these properties:
If you set up a background for a column or column group, that background will be visible for transparent rows and cells .
A column or column group's
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 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”.
If you set the
of a column or column group to the
collapse value, that column or group will
disappear as if it had never existed.
The first property that affects table size and layout is
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
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
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
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.
Rendering a table with
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
width property (which is
auto by default.
If the table's
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
property of the row, whichever is larger.
The height of a given cell is the height of its content,
or the value of its
whichever is larger.
The borders that appear in a table depend on the value
you set for the table's
property. Select one of:
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:
that affects the cell has the value
hidden, there will be no border.
If any of the relevant
border-style properties are
none but others are not
will be ignored.
Wider borders have precedence over narrower borders.
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
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.
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
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.
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
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.
When a table is being rendered by a speech synthesizer,
speak-header property controls when
table header information (row titles and column titles)
is presented. Values may be:
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.
Speak header information for each cell.