17 Tables

caption-side

Value:

top | bottom | left | right | inherit Initial: top Applies to: table‑caption elements; Inherited

Fixed table layout

The tables width may be specified explicitly with the width property, auto (for both display: table and display: inline-table) means use the automatic table layout algorithm.

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than auto for the width property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than auto for the width property sets the width for that column. If the cell spans more than one column, the width is divided over the columns.
3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the width property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns.

The user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the overflow property to determine whether to clip the overflow content.

Automatic table layout

Column widths are determined as follows:

1. Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified width (W) of the cell is greater than MCW, W is the minimum cell width. A value of auto means that MCW is the minimum cell width.

   Also, calculate the "maximum" cell width of each cell: formatting then content without breaking lines other than where explicit line breaks occur.

2. For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by the cell with the largest minimum cell width (or the column width, whichever is larger). The maximum is that required by the cell with the largest maximum cell width (or the column width, whichever is larger).
3. For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as wide as the cell. Do the same for the maximum widths. If possible, widen all spanned columns by approximately the same amount.

This gives a maximum and minimum width for each column. Column widths influence the final table width as follows:

1. If the table or inline-table elements width property has a specified value (W) other than auto, the propertys computed value is the greater of W and the minimum width required by all the columns plus cell spacing or borders (MIN). If W is greater than MIN, the extra width should be distributed over the columns.
2. If the table or inline-table element has width: auto, the computed table width is the greater of the tables containing block width and MIN. However, if the maximum width required by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use MAX.

A percentage value for a column width is relative to the table width. If the table has width: auto, a percentage represents a constraint on the columns width, which a UA should try to satisfy. (Obviously, this is not always possible: if the columns width is 110%, the constraint cannot be satisfied.)

17.5.3 Table height algorithms

The height of a table‑row elements box is calculated once the user agent has all the cells in the row available: it is the maximum of the rows specified height and the minimum height (MIN) required by the cells. A height value of auto for a table‑row means the computed row height is MIN. MIN depends on cell box heights and cell box alignment (much like the calculation of a line box height). CSS2 does not define what percentage values of height refer to when specified for table rows and row groups.

In CSS2, the height of a cell box is the maximum of the table cells height property and the minimum height required by the content (MIN). A value of auto for height implies a computed value of MIN. CSS2 does not define what percentage values of height refer to when specified for table cells.

CSS2 does not specify how cells that span more than row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.

The vertical-align property of each table cell determines its alignment within the row. Each cells content has a baseline, a top, a middle, and a bottom, as does the row itself. In the context of tables, values for vertical-align have the following meanings:

baseline

The baseline of the cell is put at the same height as the baseline of the first of the rows it spans (see ?? for the definition of baselines of cells and rows).

top

The top of the cell box is aligned with the top of the first row it spans.

bottom

The bottom of the cell box is aligned with the bottom of the last row it spans.

middle

The center of the cell is aligned with the center of the rows it spans.

sub, super, text-top, text-bottom

These values do not apply to cells; the cell is aligned at the baseline instead.

The baseline of a cell is the baseline of the first line box in the cell. If there is no text, the baseline is the baseline of whatever object is displayed in the cell, or, if it has none, the bottom of the cell box. The maximum distance between the top of the cell box and the baseline over all cells that have vertical-align: baseline is used to set the baseline of the row. Here is an example:

Cell boxes 1 and 2 are aligned at their baselines. Cell box 2 has the largest height above the baseline, so that determines the baseline of the row. Note that if there is no cell box aligned at its baseline, the row will not have (nor need) a baseline.

To avoid ambiguous situations, the alignment of cells proceeds in the following order:

1. First the cells that are aligned on their baseline are positioned. This will establish the baseline of the row. Next the cells with vertical-align: top are positioned.
2. The row now has a top, possibly a baseline, and a provisional height, which is the distance from the top to the lowest bottom of the cells positioned so far. (See conditions on the cell padding .)
3. If any of the remaining cells, those aligned at the bottom or the middle, have a height that is larger than the current height of the row, the height of the row will be increased to the maximum of those cells, by lowering the bottom.
4. Finally the remaining cells are positioned.

Cell boxes that are smaller than the height of the row receive extra top or bottom padding.

17.5.4 Horizontal alignment in a column

When the text-align property for more than one cell in a column is set to a <string> value, the content of those cells is aligned along a vertical axis. The beginning of the string touches this axis. Character directionality determines whether the string lies to the left or right of the axis.

Aligning text in this way is only useful if the text fits on one line. The result is undefined if the cell content spans more than one line.

If value of text-align for a table cell is a string but the string doesnt occur in the cell content, the end of the cells content touches the vertical axis of alignment.

Note that the strings do not have to be the same for each cell, although they usually are.

CSS does not provide a way specify the offset of the vertical alignment axis with respect to the edge of a column box.

   TD { text-align: "." }
   TD:before { content: "$" }

17.5.5 Dynamic row and column effects

17.6 Borders

17.6.2 The collapsing border model

Borders are centered on the grid lines between the cells.

The width of the table, the widths of the borders, the padding, and the cell width interact. Their relation is holds for every row of the table:

row-width =
(0.5 * border-width₀) + padding-left₁ + width₁ + padding-right₁ + border-width₁ + padding-left₂ +...+ padding-right_n + (0.5 * border-width_n)

n is the number of cells in the row, and border-width_i refers to the border between cells i and i + 1.
only half of the two exterior borders are counted in the table width; the other half of these two borders lies in the margin area.

in collapsing border, the width of the table includes half the table border and
the table doesnt have padding (but does have margins).

Border conflict resolution

The following rules determine which border style "wins" in case of a conflict:

1. Borders with the border-style of hidden take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
2. Borders with a style of none have the lowest priority. Only if the border properties of all the elements meeting at this edge are none will the border be omitted (none is the default value for the border style.)
3. If none of the styles is hidden and at least one of them is not none, then narrow borders are discarded in favor of wider ones. If several have the same border-width than styles are preferred in this order: double, solid, dashed, dotted, ridge, outset, groove, and the lowest: inset.
4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table.

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

In the separated borders model, this property controls the rendering of borders around cells that have no visible content. Empty cells and cells with the visibility property set to hidden are considered to have no visible content.
Visible content includes "&nbsp;" (x'A0') and other whitespace ^?
except: ASCII CR (x'0D'), LF (x'0A'), tab (x'09'), and space (x'20').

show : borders are drawn around empty cells (like normal cells).
hide : no borders are drawn around empty cells.
 If all the cells in a row have a value of hide and have no visible content, the entire row behaves as if it had display: none.

17.6.3 Border styles

17.7 Audio rendering of tables

When a table is spoken by a speech generator, the relation between the data cells and the header cells must be expressed in a different way than by horizontal and vertical alignment. Some speech browsers may allow a user to move around in the 2-dimensional space, thus giving them the opportunity to map out the spatially represented relations. When that is not possible, the style sheet must specify at which points the headers are spoken.

17.7.1 Speaking headers: the speak-header property

This property specifies whether table headers are spoken before every cell, or only before a cell when that cell is associated with a different header than the previous cell. Values have the following meanings:

once

The header is spoken one time, before a series of cells.

always

The header is spoken before every pertinent cell.

Each document language may have different mechanisms that allow authors to specify headers. For example, in HTML 4.0 ([HTML40]), it is possible to specify header information with three different attributes ("headers", "scope", and "axis"), and the specification gives an algorithm for determining header information when these attributes have not been specified.

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>

<TR> <TH> <TH> 
Meals <TH>Hotels <TH>Transport <TH> 
subtotal 
<TR> <TH id="san-jose" axis="san-jose"> 
San Jose 
<TR> <TH headers="san-jose"> 
25-Aug-97 <TD>37.74 <TD>112.00 <TD>45.00 <TD> 
<TR> <TH headers="san-jose"> 
26-Aug-97 <TD>27.28 <TD>112.00 <TD>45.00 <TD> 
<TR> <TH headers="san-jose"> 
subtotal <TD>65.02 <TD>224.00 <TD>90.00 <TD>379.02 
<TR> <TH id="seattle" axis="seattle"> 
Seattle  
<TR> <TH headers="seattle"> 
27-Aug-97 <TD>96.25 <TD>109.00 <TD>36.00 <TD> 
<TR> <TH headers="seattle"> 
28-Aug-97 <TD>35.00 <TD>109.00 <TD>36.00 <TD> 
<TR> <TH headers="seattle"> 
subtotal <TD>131.25 <TD>218.00 <TD>72.00 <TD>421.25 
<TR> <TH>
Totals <TD>196.27 <TD>442.00 <TD>162.00 <TD>800.27  


</TABLE>

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

San Jose, 25-Aug-97, Meals: 37.74 Hotels: 112.00 Transport: 45.00
  26-Aug-97, Meals: 27.28 Hotels: 112.00
...