Styling Web pages with CSS-2 |  |
Styling Web pages with CSS-2 | |
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.
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.
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.
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.
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:
If any border-style property
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 none, the none property
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 double, solid, dashed, dotted, ridge, outset, groove, and
inset.
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.
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.