17 Tables

17.1 Introduction to tables

Tables represent relationships between data. Authors specify these relationships in the document language and specify their presentation in CSS, in two ways: visually and aurally.

Authors may specify the visual formatting of a table as a rectangular grid of cells. Rows and columns of cells may be organized into row groups and column groups. Rows, columns, row groups, row columns, and cells may have borders drawn around them Data may be aligned vertically or horizontally within a cell and align data in all cells of a row or column.

Authors may also specify the aural rendering of a table; how headers and data will be spoken. In the document language, authors may label cells and groups of cells so that when rendered aurally, cell headers are spoken before cell data. In effect, this "serializes" the table: users browsing the table aurally hear a sequence of headers followed by data.

<TABLE border=1 bgcolor=linen style=border-style:dashed>
<CAPTION>This is a simple 3x3 table with a caption
<TR id=first> <TH>Header 1 1     <TH>head 1 2<Th>head 1 3
<TR id=first> <TH>Header 2 1     <TD>Cell 2 2<TD>Cell 2 3
<TR id=row2>  <TH>Header 3 1     <TD>Cell 3 3<TD>Cell 3 3
<TR id=row3>  <TH>-x-Header 4 1 x-<TD>C 5    <TD>x<br>C 6<br>x
</TABLE>

We discuss the various table elements in the following section. In this specification, the term table element refers to any element involved in the creation of a table. An |table element::internal">"internal" table element is one that produces a row, row group, column, column group, or cell.

17.2 The CSS table model

The structure of a table closely parallels the visual layout. A table consists of an optional caption and rows of cells and is "row primary" since authors specify rows, not columns, explicitly. Columns are derived once all the rows have been specified.
The first cell of each row belongs to the first column, the second to the second column, etc.).
Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).

Table model : captions, rows, row groups, columns, column groups, and cells.

TABLE
TR Specifies that an element is a row of cells.
THEAD displayed before all other rows and rowgroups and after any top captions.
Print user agents may repeat footer rows on each page spanned by a table.
TFOOT always displayed after all other rows and rowgroups and before any bottom captions.
Print user agents may repeat footer rows on each page spanned by a table.
COL Specifies that an element describes a column of cells.
COLGROUP Specifies that an element groups one or more columns.
TD, TH Specify that an element represents a table cell.
CAPTION Specifies a caption for the table.

Elements with display set to table‑column or table‑column-group are not rendered (as if they had display: none), but they are useful, because they may have attributes which induce a certain style for the columns they represent.

The default style sheet for HTML 4.0 in the appendix illustrates the use of these values for HTML 4.0:

TABLE    { display: table }
TR       { display: table‑row }
THEAD    { display: table‑header-group }
TBODY    { display: table‑row‑group }
TFOOT    { display: table‑footer-group }
COL      { display: table‑column }
COLGROUP { display: table‑column-group }
TD, TH   { display: table‑cell }
CAPTION  { display: table‑caption }

User agents may ignore these display property values for HTML documents, since authors should not alter an elements expected behavior.

17.2.1 Anonymous table objects

HTML user agents are not required to create anonymous

17.3 Column selectors

Table cells may belong to two contexts: rows and columns.
Cells are descendants of rows, never of columns.

ONLY the following properties apply to column and column-group elements:

    COL   { border-style: none solid }
    TABLE { border-style: hidden } 

    COL.totals { background: blue } 

    TABLE { table‑layout: fixed }
    COL.totals { background:lightblue;width:20em;text-align:right } 

<table border=1 cellpadding=2 cellspacing=0>
<col class=quan ><col class=desc><col class=each><col class=totals><col class=bo>
<tr><td>quan     <td>description <td>each        <td>extension     <td>back ordered

(only the extension column should be 20em wide; notice text-align:right is NOT honered!))

quan	description	each	extension 1234567890	back ordered
1	screws	$1	$1	0
1	nails	$2		1

17.4 Tables in the visual formatting model

A table may behave like a block-level or replaced inline-level element.
Tables have content, padding, borders, and margins.

In both cases, the table element generates an anonymous box that contains the table box itself and the captions box.
They retain their own content, padding, margin, and border areas, and the dimensions of the rectangular anonymous box are the smallest required to contain both.
Vertical margins collapse where the table box and caption box touch.
Any repositioning of the table move the entire anonymous box, not just the table box, so that the caption follows the table.

17.4.1 Caption position and alignment

Position of the caption box with respect to the table box.
top caption box above the table box.
bottom below
left right

top and bottom captions are formatted as if they were a block element before or after the table, except that they

• inherit inheritable properties from the table, and
• are not considered to be a block box for the purposes of any compact or run-in element that may precede the table.

A top or bottom captions behave like a block box for width calculations; the width is computed with respect to the width of the table boxs containing block.

auto left or right captions tells the user agent to chose a "reasonable width", which varies between "the narrowest possible box" to "a single line", Do not specify auto for left and right caption widths.

To align caption content horizontally use the text-align property.
For vertical alignment of a left or right caption box with respect to the table box, use the vertical-align property, top, middle, and bottom other values are treated as top.

CAPTION { caption-side:bottom; width:auto; text-align:left }

BODY { margin-left: 8em }
TABLE { margin-left: auto; margin-right: auto }
CAPTION { caption-side: left; margin-left: -8em; width: 8em; text-align: right; vertical-align: bottom }

17.5 Visual layout of table contents

Like other elements of the document language, internal table elements generate rectangular boxes with content, padding, and borders. They do not have margins, however.

The visual layout of these boxes is governed by a rectangular, irregular grid of rows and columns. Each box occupies a whole number of grid cells, determined according to the following rules. These rules do not apply to HTML 4.0 or earlier HTML versions; HTML imposes its own limitations on row and column spans.

1. Each row box occupies one row of grid cells. Together, the row boxes fill the table from top to bottom in the order they occur in the source document (i.e., the table occupies exactly as many grid rows as there are row elements).
2. A row group occupies the same grid cells as the rows it contains.
3. A column box occupies one or more columns of grid cells. Column boxes are placed next to each other in the order they occur. The first column box may be either on the left or on the right, depending on the value of the direction property of the table.
4. A column group box occupies the same grid cells as the columns it contains.
5. Cells may span several rows or columns. (Although CSS2 doesnt define how the number of spanned rows or columns is determined, a user agent may have special knowledge about the source document; a future version of CSS may provide a way to express this knowledge in CSS syntax.) Each cell is thus a rectangular box, one or more grid cells wide and high. The top row of this rectangle is in the row specified by the cells parent. The rectangle must be as far to the left as possible, but it may not overlap with any other cell box, and must be to the right of all cells in the same row that are earlier in the source document. (This constraint holds if the direction property of the table is ltr; if the direction is rtl, interchange "left" and "right" in the previous sentence.)
6. A cell box cannot extend beyond the last row box of a table or row-group; the user agents must shorten it until it fits.

Note. Table cells may be relatively and absolutely positioned, but this is not recommended: positioning and floating remove a box from the flow, affecting table alignment.

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

17.5.1 Table layers and transparency

1. The lowest layer is a single plane, representing the table box itself. Like all boxes, it may be transparent.

2. The next layer contains the column groups. The columns groups are as tall as the table, but they need not cover the whole table horizontally.

3. On top of the column groups are the areas representing the column boxes. Like column groups, columns are as tall as the table, but need not cover the whole table horizontally.

4. Next is the layer containing the row groups. Each row group is as wide as the table. Together, the row groups completely cover the table from top to bottom.

5. The next to last layer contains the rows. The rows also cover the whole table.

6. The topmost layer contains the cells themselves. As the figure shows, although all rows contain the same number of cells, not every cell may have specified content. These "empty" cells are transparent, letting lower layers shine through.

In the following example, the first row contains four cells, but the second row contains no cells, and thus the table background shines through, except where a cell from the first row spans into this row. The following HTML code and style rules

<STYLE type="text/css"> TABLE { background: yellow; border-collapse: collapse } TD { background: red; border: double black } </STYLE> <TABLE> <TR><TD> 1 <TD rowspan=2> 2 <TD> 3 <TD> 4 </TR> <TR><TD></TD></TR> </TABLE>

1 2 3 4

might be formatted as follows:
image

Table with three empty cells in the bottom row.

17.5.2 Table width algorithms: the table-layout property

table-layout:  auto | fixed | inherit
Initial: auto; Applies to: table and inline-table elements; NOT Inherited; Media:  visual

Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the tables width, the width of the columns, and borders or cell spacing.

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

In this algorithm the tables width is given by the width of its columns (and intervening borders). This algorithm reflects the behavior of several popular HTML user agents at the writing of this specification. UAs are not required to implement this algorithm to determine the table layout in the case that table‑layout is auto; they can use any other algorithm.

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.)

Note. In this algorithm, rows (and row groups) and columns (and column groups) both constrain and are constrained by the dimensions of the cells they contain. Setting the width of a column may indirectly influence the height of a row, and vice versa.

17.5.3 Table height algorithms

The height of a table is given by the height property for the table or inline-table element. A value of auto means that the height is the sum of the row heights plus any cell spacing or borders. Any other value specifies the height explicitly; the table may thus be taller or shorter than the height of its rows. CSS2 does not specify rendering when the specified table height differs from the content height, in particular whether content height should override specified height; if it doesnt, how extra space should be distributed among rows that add up to less than the specified table height; or, if the content height exceeds the specified table height, whether the UA should provide a scrolling mechanism. Note. Future versions of CSS may specify this further.

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:

Diagram showing the effect of various values of vertical-align on table cells.

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

cell contents within a cell box is text-align property.

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. Only useful if the text fits on one line.
text-align is a string but the string doesn't occur in the cell, the end of the content touches the vertical axis of alignment.
Alignmet strings do not have to be the same for each cell.

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

Example(s):

The following style sheet should cause the column of dollar figures in the table to align along the decimal point. The :before pseudo-element to insert a dollar sign before each figure.

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

<TABLE border=1> <COL width="200"> <TR> <TH>Long distance calls <TR> <TD> 1.30 <TR> <TD> 2.50 <TR> <TD> 10.80 <TR> <TD> 111.01 <TR> <TD> 85. <TR> <TD> 90 <TR> <TD> .05 <TR> <TD> .06 </TABLE>

generated via code shown   Long distance calls 1.30 2.50 10.80 111.01 85. 90 .05 .06

generated using <PRE> and EXPLICIT $   Long distance calls $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06

17.5.5 Dynamic row and column effects

visibility:collapse ^† for row, row group, column, and column group elements,
causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content.
The suppression of the row or column, does not otherwise affect the layout of the table^†.
This allows dynamic effects to remove table rows or columns without forcing a re-layout of the table in order to account for the potential change in column constraints.

17.6 Borders see section 8 Box Distinct models for setting borders: One is most suitable for around individual cells, the other is suitable for borders that are continuous from one end of the table to the other. border-collapse: collapse | separate | inherit Initial:collapse; Applies to: table and inline-table elements; Inherited; Media:visual Many border styles can be achieved with either model, so it is often a matter of taste which one is used.

17.6.2 The collapsing border model border-collapse:collapse In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group. Borders for HTMLs "rule" attribute can be specified this way. 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-width0)† + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 + … + padding-rightn + (0.5 * border-widthn) n is the number of cells in the row, and border-widthi 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. Schema showing the widths of cells and borders and the padding of cells. 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 In the collapsing border model, borders at every edge of every cell may be specified by border properties on a variety of elements that meet at that edge (cells, rows, row groups, columns, column groups, and the table itself), and these borders may vary in width, style, and color. The rule of thumb is that at each edge the most "eye catching" border style is chosen, except that any occurrence of the style hidden unconditionally turns the border off. The following rules determine which border style "wins" in case of a conflict: 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. 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.) 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. 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. The following example illustrates the application of these precedence rules. This style sheet: 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; } with this HTML source: <TABLE> <COL id="col1"><COL id="col2"><COL id="col3"> <TR id="row1"> <TD> 1 <TD> 2 <TD> 3 <TR id="row2"> <TD> 4 <TD class="solid-blue"> 5 <TD class="solid-green"> 6 <TR id="row3"> <TD> 7 <TD> 8 <TD> 9 <TR id="row4"> <TD> 10 <TD> 11 <TD> 12 <TR id="row5"> <TD> 13 <TD> 14 <TD> 15 </TABLE> would produce something like this: An example of a table with collapsed borders. Example(s): The next example shows a table with horizontal rules between the rows. The top border of the table is set to hidden to suppress the top border of the first row. This implements the "rules" attribute of HTML 4.0 (rules="rows"). TABLE[rules=rows] TR { border-top: solid } TABLE[rules=rows] { border-collapse: collapse; border-top: hidden } Table with horizontal rules between the rows. In this case the same effect can also be achieved without setting a hidden border on TABLE, by addressing the first row separately. Which method is preferred is a matter of taste. TR:first-child { border-top: none } TR { border-top: solid } Example(s): Here is another example of hidden collapsing borders: Table with two omitted internal borders. HTML source: <TABLE style="border-collapse: collapse; border: solid;"> <TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD> <TD style="border: solid">bar</TD></TR> <TR><TD style="border: none">foo</TD> <TD style="border: solid">bar</TD></TR> </TABLE>

17.6.1 The separated borders model border-collapse:separate border-spacing: <length> <vlength>? | inherit Initial: 0 Applies to:  table and inline-table elements Inherited; Media:visual distance that separates adjacent cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing. Lengths may not be negative. In this model, each cell has an individual border. The border-spacing property specifies the distance between the borders of adjacent cells. This space is filled with the background of the table element. Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements). TABLE.bo { border: outset 10pt; border-collapse: separate; border-spacing: 15pt ;border-color:blue} TD.bo { border: inset 5pt } TD.bospecial { border: inset 10pt ; border-color:pink} /* The top-left cell */ <table class=bo> <tr><td class=bospecial> 1,1 <td class=bo> 1,2 <td class=bo> 1,3 <tr><td class=bo> 2,1 <td class=bo> 2,2 <td class=bo> 2,3 </table> 1,1 1,2 1,3 2,1 2,2 2,3 generated image without color specdifications and without cell row,col numbering A table with border-spacing set to a length value. Each cell has its own border, and the table has a separate border as well. Borders around empty cells: the empty-cells property empty-cells: show | hide | inherit Applies to:table‑cell elements; Inherited; Media:visual 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. Example(s): TABLE { empty-cells: show } causes borders to be drawn around all cells ( rows with fewer cols won't have border): show 1,1 1,2 below are empty cells 1,4 2,1 2,2 2,4 3,1 3,2 3,4 4,1 4,2 4,4 5,1 5,2 &nbsp; below 5,4 6,1 6,2   6,4 7,1 7,2 &#xA0; below 7,4 8,1 8,2   8,4 9,1 9,2 no cell → hide 1,1 1,2 below are empty cells 1,4 2,1 2,2 2,4 3,1 3,2 3,4 4,1 4,2 4,4 5,1 5,2 &nbsp; below 5,4 6,1 6,2   6,4 7,1 7,2 &#xA0; below 7,4 8,1 8,2   8,4 9,1 9,2 no cell →

17.6.3 Border styles

See notes for samples
Some of the values of the border-style have different meanings in tables than for other elements. In the list below they are marked with an asterisk.

none	No border.
*hidden	Same as none, but in the collapsing border model, also inhibits any other border (see border conflicts).
dotted	dots
dashed	short lines
solid	single line
double	two solid lines. The sum of the width of the lines and the space between is the value of border-width.
groove	looks as though it were carved into the canvas.
ridge	looks as though it were coming out of the canvas.
*inset	In the separated borders model, the border makes the entire box look as though it were embedded in the canvas. In the collapsing border model, same as groove.
*outset	In the separated borders model, the border makes the entire box look as though it were coming out of the canvas. In the collapsing border model, same as ridge.

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

speak-header

Value:

once | always | inherit Initial:once; Applies to:elements that have table header information Inherited; Media:aural

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.

>

Image of a table with header cells ("San Jose" and "Seattle") that are not in the same column or row as the data they apply to.

This HTML example presents the money spent on meals, hotels and transport in two locations (San Jose and Seattle) for successive days. Conceptually, you can think of the table in terms of a n-dimensional space. The headers of this space are: location, day, category and subtotal. Some cells define marks along an axis while others give money spent at points within this space. The markup for this table is:

<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>

By providing the data model in this way, authors make it possible for speech enabled-browsers to explore the table in rich ways, e.g., each cell could be spoken as a list, repeating the applicable headers before each data cell:

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

The browser could also speak the headers only when they change:

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

---

previous   next   contents   properties   index  

from www.w3.org/TR/1998/REC-CSS2-19980512
I don't think they are gonna change it
interpreted by DGermancss@Real-World-Systems.com