11. Tables

11.1 Introduction to tables

The HTML table model allows authors to arrange data -- text, preformattedtext, images, links, forms, form fields, other tables, etc. -- into rows andcolumns of cells.

Each table may have an associated caption (see the CAPTION element) that provides a short description of the table'spurpose. A longer description may also be provided (via the summary attribute) for the benefit of people using speech orBraille-based user agents.

Table rows may be grouped into a head, foot, andbody sections, (via the THEAD, TFOOT and TBODYelements, respectively). Row groups convey additional structural informationand may be rendered by user agents in ways that emphasize this structure. Useragents may exploit the head/body/foot division to support scrolling of bodysections independently of the head and foot sections. When long tables areprinted, the head and foot information may be repeated on each page thatcontains table data.

Authors may also group columns to provideadditional structural information that may be exploited by user agents.Furthermore, authors may declare column properties at the start of a tabledefinition (via the COLGROUP and COL elements) in a way that enablesuser agents to render the table incrementally rather than having to wait forall the table data to arrive before rendering.

Table cells may either contain "header" information(see the TH element) or "data" (see the TD element). Cells may span multiplerows and columns. The HTML 4 table model allows authors to label each cell sothat non-visual user agents may more easilycommunicate heading information about the cell to the user. Not only do thesemechanisms greatly assist users with visual disabilities, they make it possiblefor multi-modal wireless browsers with limited display capabilities (e.g.,Web-enabled pagers and phones) to handle tables.

Tables should not be used purely as a means to layout document content asthis may present problems when rendering to non-visual media. Additionally,when used with graphics, these tables may force users to scroll horizontally toview a table designed on a system with a larger display. To minimize theseproblems, authors should use style sheetsto control layout rather than tables.

<TABLE border="1"  summary="This table gives some statistics about fruit   flies: average height and weight, and percentage   with red eyes (for both males and females)."><CAPTION><EM>A test table with merged cells</EM></CAPTION><TR><TH rowspan="2"><TH colspan="2">Average <TH rowspan="2">Red<BR>eyes<TR><TH>height<TH>weight<TR><TH>Males<TD>1.9<TD>0.003<TD>40%<TR><TH>Females<TD>1.7<TD>0.002<TD>43%</TABLE>

  A test table with merged cells /----------------------------------------- |  |  Average  |   Red | |  |-------------------|  eyes | |  |  height |  weight |  | |-----------------------------------------| |  Males   | 1.9 | 0.003   |   40% | |-----------------------------------------| | Females  | 1.7 | 0.002   |   43% | -----------------------------------------/

11.2 Elements for constructing tables

11.2.1 The TABLE element

<!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)><!ATTLIST TABLE -- table element --  %attrs;  -- %coreattrs, %i18n, %events --  summary %Text; #IMPLIED  -- purpose/structure for speech output--  width   %Length;   #IMPLIED  -- table width --  border  %Pixels;   #IMPLIED  -- controls frame width around table --  frame   %TFrame;   #IMPLIED  -- which parts of frame to render --  rules   %TRules;   #IMPLIED  -- rulings between rows and cols --  cellspacing %Length;   #IMPLIED  -- spacing between cells --  cellpadding %Length;   #IMPLIED  -- spacing within cells --  >

Start tag: required, End tag: required

The TABLE element contains all other elements that specify caption,rows, content, and formatting.

The following informative list describes what operations user agents maycarry out when rendering a table:

• Make the table summary available to the user. Authors should providea summary of a table's content and structure so that people using non-visualuser agents may better understand it.
• Render the caption, if one is defined.
• Render the table header, if one is specified. Render the table footer, ifone is specified. User agents must know where to render the header and footer.For instance, if the output medium is paged, user agents may put the header atthe top of each page and the footer at the bottom. Similarly, if the user agentprovides a mechanism to scroll the rows, the header may appear at the top ofthe scrolled area and the footer at the bottom.
• Calculate the number of columns in the table.Note that the number of rows in a table is equalto the number of TR elements contained by the TABLEelement.
• Group the columns according to any column groupspecifications.
• Render the cells, row by row and grouped in appropriate columns, betweenthe header and footer. Visual user agents should format the table according to HTML attributes and style sheetspecification.

The HTML table model has been designed so that, with author assistance, useragents may render tables incrementally (i.e., astable rows arrive) rather than having to wait for all the data before beginningto render.

In order for a user agent to format a table in one pass, authors must tellthe user agent:

• The number of columns in the table. Please consult the section on calculating the number of columns in a table for details onhow to supply this information.
• The widths of these columns. Please consult the section on calculating the width of columns for details on how tosupply this information.

More precisely, a user agent may render a table in a single pass when thecolumn widths are specified using a combination of COLGROUP and COL elements. If any of the columns are specified inrelative or percentage terms (see the section on calculating the width of columns), authors must also specify the width ofthe table itself.

Table directionality 

The directionality of a tableis either the inherited directionality (the default is left-to-right) or thatspecified by the dir attribute for the TABLE element.

For a left-to-right table, column zero is on the left side and row zero isat the top. For a right-to-left table, column zero is on the right side and rowzero is at the top.

When a user agent allots extra cells to a row (see the section on calculating the number of columns in a table), extra rowcells are added to the right of the table for left-to-right tables and to theleft side for right-to-left tables.

Note that TABLE is the only element on which dirreverses the visual order of the columns; a single table row (TR) or agroup of columns (COLGROUP) cannot be independently reversed.

When set for the TABLE element, the dir attribute also affects thedirection of text within table cells (since the dir attribute is inherited byblock-level elements).

<TABLE dir="RTL">...the rest of the table...</TABLE>

The direction of text in individual cells can be changed by setting the dirattribute in an element that defines the cell. Please consult the section on bidirectional text for more informationon text direction issues.

11.2.2 Table Captions: The CAPTION element

<!ELEMENT CAPTION  - - (%inline;)* -- table caption --><!ATTLIST CAPTION  %attrs;  -- %coreattrs, %i18n, %events --  >

Start tag: required, End tag: required

When present, the CAPTION element's text should describe the nature of thetable. The CAPTION element is only permitted immediately afterthe TABLE start tag. A TABLE element may only contain one CAPTION element.

Visual user agents allow sighted people to quickly grasp the structure ofthe table from the headings as well as the caption. A consequence of this isthat captions will often be inadequate as a summary of the purpose andstructure of the table from the perspective of people relying on non-visualuser agents.

Authors should therefore take care to provideadditional information summarizing the purpose and structure of thetable using the summary attribute of the TABLE element. This is especiallyimportant for tables without captions. Examples below illustrate the use of thesummary attribute.

Visual user agents should avoid clipping any part ofthe table including the caption, unless a means is provided to access allparts, e.g., by horizontal or vertical scrolling. We recommend that the captiontext be wrapped to the same width as the table. (See also the section on recommended layout algorithms.)

11.2.3 Row groups: the THEAD, TFOOT, and TBODY elements

<!ELEMENT THEAD - O (TR)+   -- table header --><!ELEMENT TFOOT - O (TR)+   -- table footer -->

Start tag: required, End tag: optional

<!ELEMENT TBODY O O (TR)+   -- table body -->

Start tag: optional, End tag: optional

<!ATTLIST (THEAD|TBODY|TFOOT)  -- table section --  %attrs;  -- %coreattrs, %i18n, %events --  %cellhalign; -- horizontal alignment in cells --  %cellvalign; -- vertical alignment in cells --  >

Table rows may be grouped into a table head, tablefoot, and one or more table body sections, using the THEAD,TFOOT and TBODY elements, respectively. This division enablesuser agents to support scrolling of table bodies independently of the tablehead and foot. When long tables are printed, the table head and footinformation may be repeated on each page that contains table data.

The table head and table foot should contain information about the table'scolumns. The table body should contain rows of table data.

When present, each THEAD, TFOOT, and TBODYcontains a row group. Each row group must contain at least one row,defined by the TR element.

<TABLE><THEAD> <TR> ...header information...</THEAD><TFOOT> <TR> ...footer information...</TFOOT><TBODY> <TR> ...first row of block one data... <TR> ...second row of block one data...</TBODY><TBODY> <TR> ...first row of block two data... <TR> ...second row of block two data... <TR> ...third row of block two data...</TBODY></TABLE>

TFOOT must appear before TBODY within a TABLEdefinition so that user agents can render the foot before receiving all of the(potentially numerous) rows of data. The following summarizes which tags arerequired and which may be omitted:

• The TBODY start tag is always required except when the table containsonly one table body and no table head or foot sections. The TBODYend tag may always be safely omitted.
• The start tags for THEAD and TFOOT are required when the table headand foot sections are present respectively, but the corresponding end tags mayalways be safely omitted.

Conforming user agent parsers must obey these rules for reasons of backwardcompatibility.

<TABLE><THEAD> <TR> ...header information...<TFOOT> <TR> ...footer information...<TBODY> <TR> ...first row of block one data... <TR> ...second row of block one data...<TBODY> <TR> ...first row of block two data... <TR> ...second row of block two data... <TR> ...third row of block two data...</TABLE>

The THEAD, TFOOT, and TBODY sections must contain the same number ofcolumns.

11.2.4 Column groups: the COLGROUP and COL elements

Column groups allow authors to createstructural divisions within a table. Authors may highlight this structurethrough style sheets or HTML attributes (e.g., the rules attribute for the TABLE element). For an example of thevisual presentation of column groups, please consult the sample table.

A table may either contain a single implicit column group (no COLGROUP element delimits the columns) or any number of explicitcolumn groups (each delimited by an instance of the COLGROUP element).

The COL element allows authors to share attributes among several columnswithout implying any structural grouping. The "span" of the COLelement is the number of columns that will share the element's attributes.

The COLGROUPelement 

<!ELEMENT COLGROUP - O (COL)*  -- table column group --><!ATTLIST COLGROUP  %attrs;  -- %coreattrs, %i18n, %events --  span NUMBER 1 -- default number of columns in group --  width   %MultiLength;  #IMPLIED  -- default width for enclosed COLs --  %cellhalign; -- horizontal alignment in cells --  %cellvalign; -- vertical alignment in cells --  >

Start tag: required, End tag: optional

The COLGROUP element creates an explicit column group. The number ofcolumns in the column group may be specified in two, mutually exclusiveways:

1. The element's span attribute (default value 1) specifiesthe number of columns in the group.
2. Each COL element in the COLGROUP represents one or more columnsin the group.

The advantage of using the span attribute is that authorsmay group together information about column widths. Thus, if a table containsforty columns, all of which have a width of 20 pixels, it is easier towrite:

   <COLGROUP span="40" width="20">   </COLGROUP>

than:

   <COLGROUP>  <COL width="20">  <COL width="20">  ...a total of forty COL elements...   </COLGROUP>

When it is necessary to single out a column (e.g., for style information, tospecify width information, etc.) within a group, authors must identify thatcolumn with a COL element. Thus, to apply special style information to thelast column of the previous table, we single it out as follows:

   <COLGROUP width="20">  <COL span="39">  <COL id="format-me-specially">   </COLGROUP>

The width attribute of the COLGROUP element is inherited by all 40 columns. The first COLelement refers to the first 39 columns (doing nothing special to them) and thesecond one assigns an id value to the fortieth column so that style sheets mayrefer to it.

<TABLE><COLGROUP span="10" width="50"><COLGROUP span="5" width="0*"><THEAD><TR><TD> ...</TABLE>

The COL element 

<!ELEMENT COL  - O EMPTY   -- table column --><!ATTLIST COL  -- column groups and properties --  %attrs;  -- %coreattrs, %i18n, %events --  span NUMBER 1 -- COL attributes affect N columns --  width   %MultiLength;  #IMPLIED  -- column width specification --  %cellhalign; -- horizontal alignment in cells --  %cellvalign; -- vertical alignment in cells --  >

Start tag: required, End tag: forbidden

The COL element allows authors to group together attributespecifications for table columns. The COL does not groupcolumns together structurally -- that is the role of the COLGROUP element. COL elements are empty and serve only as asupport for attributes. They may appear inside or outside an explicit columngroup (i.e., COLGROUP element).

The width attribute for COL refers to the width of eachcolumn in the element's span.

Calculating the number of columns in atable 

There are two ways to determine the number of columns in a table (in orderof precedence):

1. If the TABLE element contains any COLGROUP or COLelements, user agents should calculate the number of columns by summing thefollowing:
   • For each COL element, take the value of its span attribute (default value 1).
   • For each COLGROUP element containing at least one COLelement, ignore the span attribute for the COLGROUP element. For each COL element, perform the calculation ofstep 1.
   • For each empty COLGROUP element, take the value of its span attribute (default value 1).
2. Otherwise, if the TABLE element contains no COLGROUP or COL elements, user agents should base the number ofcolumns on what is required by the rows. The number of columns is equal to thenumber of columns required by the row with the most columns, including cellsthat span multiple columns. For any row that has fewer than this number ofcolumns, the end of that row should be padded with empty cells. The "end" of arow depends on the tabledirectionality.

It is an error if a table contains COLGROUP or COLelements and the two calculations do not result in the same number ofcolumns.

Once the user agent has calculated the number of columns in the table, itmay group them into column groups.

<TABLE><COLGROUP span="3"></COLGROUP><TR><TD> ......rows...</TABLE><TABLE><COLGROUP><COL><COL span="2"></COLGROUP><TR><TD> ......rows...</TABLE><TABLE><COLGROUP><COL></COLGROUP><COLGROUP span="2"><TR><TD> ......rows...</TABLE><TABLE><TR>  <TD><TD><TD></TR></TABLE>

Calculating the width of columns 

Authors may specify column widths in three ways:

Fixed

A fixed width specification is given in pixels (e.g., width="30"). A fixed-width specification enables incrementalrendering.

Percentage

A percentage specification (e.g., width="20%")is based on the percentage of the horizontal space available to the table(between the current left and right margins, including floats). Note that thisspace does not depend on the table itself, and thus percentage specificationsenable incremental rendering.

Proportional

Proportional specifications (e.g., width="3*")refer to portions of the horizontal space required by a table. If thetable width is given a fixed value via the widthattribute of the TABLE element, user agents may render the tableincrementally even with proportional columns.

However, if the table does not have a fixed width, user agents must receiveall table data before they can determine the horizontal space required by thetable. Only then may this space be allotted to proportional columns.

If an author specifies no width information for a column, a user agent maynot be able to incrementally format the table since it must wait for the entirecolumn of data to arrive in order to allot an appropriate width.

If column widths prove to be too narrow for the contents of a particulartable cell, user agents may choose to reflow the table.

 <TABLE><COLGROUP>   <COL width="30"><COLGROUP>   <COL width="30">   <COL width="0*">   <COL width="2*"><COLGROUP align="center">   <COL width="1*">   <COL width="3*" align="char" char=":"><THEAD><TR><TD> ......rows...</TABLE>

 <TABLE width="200"><COLGROUP span="10" width="15"><COLGROUP width="*">   <COL id="penultimate-column">   <COL id="last-column"><THEAD><TR><TD> ......rows...</TABLE>

11.2.5 Table rows: The TR element

<!ELEMENT TR   - O (TH|TD)+ -- table row --><!ATTLIST TR   -- table row --  %attrs;  -- %coreattrs, %i18n, %events --  %cellhalign; -- horizontal alignment in cells --  %cellvalign; -- vertical alignment in cells --  >

Start tag: required, End tag: optional

The TR elements acts as a container for a row of table cells. The endtag may be omitted.

<TABLE summary="This table charts the number of cups   of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR> ...A header row...<TR> ...First row of data...<TR> ...Second row of data......the rest of the table...</TABLE>

11.2.6 Table cells: The TH and TD elements

<!ELEMENT (TH|TD)  - O (%flow;)*   -- table header cell, table data cell--><!-- Scope is simpler than headers attribute for common tables --><!ENTITY % Scope "(row|col|rowgroup|colgroup)"><!-- TH is for headers, TD for data, but for cells acting as both use TD --><!ATTLIST (TH|TD)  -- header or data cell --  %attrs;  -- %coreattrs, %i18n, %events --  abbr %Text; #IMPLIED  -- abbreviation for header cell --  axis CDATA  #IMPLIED  -- comma-separated list of related headers--  headers IDREFS #IMPLIED  -- list of id's for header cells --  scope   %Scope; #IMPLIED  -- scope covered by header cells --  rowspan NUMBER 1 -- number of rows spanned by cell --  colspan NUMBER 1 -- number of cols spanned by cell --  %cellhalign; -- horizontal alignment in cells --  %cellvalign; -- vertical alignment in cells --  >

Start tag: required, End tag: optional

Table cells may contain two types of information: headerinformation and data. Thisdistinction enables user agents to render header and data cells distinctly,even in the absence of style sheets. For example, visual user agents maypresent header cell text with a bold font. Speech synthesizers may renderheader information with a distinct voice inflection.

The TH element defines a cell that contains header information. Useragents have two pieces of header information available: the contents of the THelement and the value of the abbr attribute. User agents must render eitherthe contents of the cell or the value of the abbr attribute. For visual media,the latter may be appropriate when there is insufficient space to render thefull contents of the cell. For non-visual media abbr may be used as anabbreviation for table headers when these are rendered along with the contentsof the cells to which they apply.

The headers and scope attributes also allow authors to help non-visualuser agents process header information. Please consult the section on labeling cells for non-visual user agents forinformation and examples.

The TD element defines a cell that contains data.

Cells may be empty (i.e., contain no data).

<TABLE summary="This table charts the number of cups   of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR>   <TH>Name</TH>   <TH>Cups</TH>   <TH>Type of Coffee</TH>   <TH>Sugar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Decaf</TD>   <TD>Yes</TD></TABLE>

Name Cups   Type of Coffee   Sugar?T. Sexton 10 Espresso NoJ. Dinnen 5  Decaf Yes

Cells that span several rows orcolumns 

Cells may span several rows or columns. The number of rows or columnsspanned by a cell is set by the rowspan and colspan attributes for the TH and TD elements.

<TABLE border="1"><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR><TH>Name<TH>Cups<TH>Type of Coffee<TH>Sugar?<TR><TD>T. Sexton<TD>10<TD>Espresso<TD>No<TR><TD>J. Dinnen<TD>5<TD>Decaf<TD>Yes<TR><TD>A. Soria<TD colspan="3"><em>Not available</em></TABLE>

Cups of coffee consumed by each senator -------------------------------------- |   Name  |Cups|Type of Coffee|Sugar?| -------------------------------------- |T. Sexton|10  |Espresso  |No | -------------------------------------- |J. Dinnen|5   |Decaf |Yes   | -------------------------------------- |A. Soria |Not available | --------------------------------------

<TABLE border="1"><TR><TD>1 <TD rowspan="2">2 <TD>3<TR><TD>4 <TD>6<TR><TD>7 <TD>8 <TD>9</TABLE>

-------------| 1 | 2 | 3 | ----|   |----| 4 |   | 6 |----|---|----| 7 | 8 | 9 |-------------

<TABLE border="1"><TR><TD>1 <TD>2 <TD>3<TR><TD colspan="2">4 <TD>6<TR><TD>7 <TD>8 <TD>9</TABLE>

-------------| 1 | 2 | 3 | --------|----| 4 | 6 |--------|----| 7 | 8 | 9 |-------------

Defining overlapping cells is an error. User agents may vary in how theyhandle this error (e.g., rendering may vary).

<TABLE border="1"><TR><TD>1 <TD>2 <TD>3<TR><TD>4 <TD rowspan="2">5 <TD>6<TR><TD colspan="2">7 <TD>9</TABLE>

11.3 Table formatting by visual useragents

HTML 4 includes mechanisms to control:

• border styles
• horizontal and vertical alignment of cellcontents
• and cell margins

11.3.1 Borders and rules

The following attributes affect a table's external frame and internalrules.

<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR>   <TH>Name</TH>   <TH>Cups</TH>   <TH>Type of Coffee</TH>   <TH>Sugar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Decaf</TD>   <TD>Yes</TD></TABLE>

<TABLE border="5" frame="vsides" rules="cols"><TR> <TD>1 <TD>2 <TD>3<TR> <TD>4 <TD>5 <TD>6<TR> <TD>7 <TD>8 <TD>9</TABLE>

The following settings should be observed by user agents for backwardscompatibility.

• Setting border="0" implies frame="void" and, unlessotherwise specified, rules="none".
• Other values of border imply frame="border" and, unless otherwise specified, rules="all".
• The value "border" in the start tag of the TABLE element should beinterpreted as the value of the frame attribute. It implies rules="all" and some default (non-zero) value for the border attribute.

<TABLE border="2"><TABLE border="2" frame="border" rules="all">

<TABLE border><TABLE frame="border" rules="all">

11.3.2 Horizontal and vertical alignment

The following attributes may be set for different table elements (see theirdefinitions).

<!-- horizontal alignment attributes for cell contents --><!ENTITY % cellhalign  "align  (left|center|right|justify|char) #IMPLIED   char   %Character; #IMPLIED  -- alignment char, e.g. char=':' --   charoff %Length;   #IMPLIED  -- offset for alignment char --"  ><!-- vertical alignment attributes for cell contents --><!ENTITY % cellvalign  "valign (top|middle|bottom|baseline) #IMPLIED"  >

<TABLE border="1"><COLGROUP><COL><COL align="char" char="."><THEAD><TR><TH>Vegetable <TH>Cost per kilo<TBODY><TR><TD>Lettuce <TD>$1<TR><TD>Silver carrots <TD>$10.50<TR><TD>Golden turnips <TD>$100.30</TABLE>

------------------------------|   Vegetable  |Cost per kilo||--------------|-------------||Lettuce   | $1   ||--------------|-------------||Silver carrots|   $10.50||--------------|-------------||Golden turnips|  $100.30|------------------------------

When the contents of a cell contain more than one instance of the alignmentcharacter specified by char and the contents wrap, user agent behavior isundefined. Authors should therefore be attentive in their use of char.

Inheritance of alignmentspecifications 

The alignment of cell contents can be specified on a cell by cell basis, orinherited from enclosing elements, such as the row, column or the tableitself.

The order of precedence (from highest to lowest) for the attributes align, char, and charoff is the following:

1. An alignment attribute set on an element within a cell's data (e.g., P).
2. An alignment attribute set on a cell (TH and TD).
3. An alignment attribute set on a column grouping element (COL and COLGROUP). When a cell is part of a multi-column span, the alignmentproperty is inherited from the cell definition at the beginning of thespan.
4. An alignment attribute set on a row or row grouping element (TR, THEAD, TFOOT, and TBODY). When a cell is part of a multi-row span,the alignment property is inherited from the cell definition at the beginningof the span.
5. An alignment attribute set on the table (TABLE).
6. The default alignment value.

The order of precedence (from highest to lowest) for the attribute valign(as well as the other inherited attributes lang, dir, andstyle) is the following:

1. An attribute set on an element within a cell's data (e.g., P).
2. An attribute set on a cell (TH and TD).
3. An attribute set on a row or row grouping element (TR, THEAD, TFOOT, and TBODY). When a cell is part of a multi-row span,the attribute value is inherited from the cell definition at the beginning ofthe span.
4. An attribute set on a column grouping element (COL and COLGROUP). When a cell is part of a multi-column span, the attributevalue is inherited from the cell definition at the beginning of the span.
5. An attribute set on the table (TABLE).
6. The default attribute value.

Furthermore, when rendering cells, horizontal alignment is determined bycolumns in preference to rows, while for vertical alignment, rows are givenpreference over columns.

The default alignment for cells depends on the user agent. However, useragents should substitute the default attribute for the current directionality(i.e., not just "left" in all cases).

User agents that do not support the "justify" value of the align attribute should use the value of the inherited directionalityin its place.

11.3.3 Cellmargins

These two attributes control spacing between and within cells. The followingillustration explains how they relate:

<TABLE cellspacing="20" cellpadding="20%"><TR> <TD>Data1 <TD>Data2 <TD>Data3</TABLE>

If a table or given column has a fixed width, cellspacing and cellpadding may demand more space thanassigned. User agents may give these attributes precedence over the width attribute when a conflict occurs, but are not required to.

11.4 Table rendering by non-visual useragents

11.4.1 Associating headerinformation with data cells

Non-visual user agents such as speech synthesizers and Braille-based devicesmay use the following TD and TH element attributes to render table cells moreintuitively:

• For a given data cell, the headers attribute lists which cellsprovide pertinent header information. For this purpose, each header cell mustbe named using the id attribute. Note that it's not always possible to make aclean division of cells into headers or data. You should use the TD elementfor such cells together with the id or scope attributes as appropriate.
• For a given header cell,the scope attribute tells the user agent the data cells for which thisheader provides information. Authors may choose to use this attribute insteadof headers according to which is more convenient; the two attributesfulfill the same function. The headers attribute is generally neededwhen headers are placed in irregular positions with respect to the data theyapply to.
• The abbr attribute specifies an abbreviated header forheader cells so that user agents may render header information morerapidly.

<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR>   <TH id="t1">Name</TH>   <TH id="t2">Cups</TH>   <TH id="t3" abbr="Type">Type of Coffee</TH>   <TH id="t4">Sugar?</TH><TR>   <TD headers="t1">T. Sexton</TD>   <TD headers="t2">10</TD>   <TD headers="t3">Espresso</TD>   <TD headers="t4">No</TD><TR>   <TD headers="t1">J. Dinnen</TD>   <TD headers="t2">5</TD>   <TD headers="t3">Decaf</TD>   <TD headers="t4">Yes</TD></TABLE>

Caption: Cups of coffee consumed by each senatorSummary: This table charts the number of cups of coffee consumed by each senator, the type  of coffee (decaf or regular), and whether  taken with sugar.Name: T. Sexton,   Cups: 10,   Type: Espresso,   Sugar: NoName: J. Dinnen,   Cups: 5, Type: Decaf,  Sugar: Yes

<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."><CAPTION>Cups of coffee consumed by each senator</CAPTION><TR>   <TH scope="col">Name</TH>   <TH scope="col">Cups</TH>   <TH scope="col" abbr="Type">Type of Coffee</TH>   <TH scope="col">Sugar?</TH><TR>   <TD>T. Sexton</TD>   <TD>10</TD>   <TD>Espresso</TD>   <TD>No</TD><TR>   <TD>J. Dinnen</TD>   <TD>5</TD>   <TD>Decaf</TD>   <TD>Yes</TD></TABLE>

<TABLE border="1" cellpadding="5" cellspacing="2"  summary="History courses offered in the community of   Bath arranged by course name, tutor, summary, code, and fee">  <TR> <TH colspan="5" scope="colgroup">Community Courses -- Bath Autumn 1997</TH>  </TR>  <TR> <TH scope="col" abbr="Name">Course Name</TH> <TH scope="col" abbr="Tutor">Course Tutor</TH> <TH scope="col">Summary</TH> <TH scope="col">Code</TH> <TH scope="col">Fee</TH>  </TR>  <TR> <TD scope="row">After the Civil War</TD> <TD>Dr. John Wroughton</TD> <TD>   The course will examine the turbulent years in England   after 1646. <EM>6 weekly meetings starting Monday 13th  October.</EM> </TD> <TD>H27</TD> <TD>&pound;32</TD>  </TR>  <TR> <TD scope="row">An Introduction to Anglo-Saxon England</TD> <TD>Mark Cottle</TD> <TD>   One day course introducing the early medieval   period reconstruction the Anglo-Saxons and   their society. <EM>Saturday 18th October.</EM> </TD> <TD>H28</TD> <TD>&pound;18</TD>  </TR>  <TR> <TD scope="row">The Glory that was Greece</TD> <TD>Valerie Lorenz</TD> <TD> Birthplace of democracy, philosophy, heartland of theater, home of argument. The Romans may have done it but the Greeks did it first. <EM>Saturday day school 25th October 1997</EM> </TD> <TD>H30</TD> <TD>&pound;18</TD>  </TR></TABLE>

11.4.2 Categorizingcells

Users browsing a table with a speech-based user agent may wish to hear anexplanation of a cell's contents in addition to the contents themselves. Oneway the user might provide an explanation is by speaking associated headerinformation before speaking the data cell's contents (see the section on associating header information with data cells).

Users may also want information about more than one cell, in which caseheader information provided at the cell level (by headers, scope, and abbr) may not provide adequate context.Consider the following table, which classifies expenses for meals, hotels, andtransport in two locations (San Jose and Seattle) over several days:

Users might want to extract information from the table in the form ofqueries:

• "What did I spend for all my meals?"
• "What did I spend for meals on 25 August?"
• "What did I spend for all expenses in San Jose?"

Each query involves a computation by the user agent that may involve zero ormore cells. In order to determine, for example, the costs of meals on 25August, the user agent must know which table cells refer to "Meals" (all ofthem) and which refer to "Dates" (specifically, 25 August), and find theintersection of the two sets.

To accommodate this type of query, the HTML 4 table model allows authors toplace cell headers and data into categories. For example, for the travelexpense table, an author could group the header cells "San Jose" and "Seattle"into the category "Location", the headers "Meals", "Hotels", and "Transport" inthe category "Expenses", and the four days into the category "Date". Theprevious three questions would then have the following meanings:

• "What did I spend for all my meals?" means "What are all the data cells inthe "Expenses=Meals" category?
• "What did I spend for meals on 25 August?" means "What are all the datacells in the "Expenses=Meals" and "Date=Aug-25-1997" categories?
• "What did I spend for all expenses in San Jose?" means "What are all thedata cells in the "Expenses=Meals, Hotels, Transport" and "Location=San Jose"categories?

Authors categorize a header or data cell by setting the axisattribute for the cell. For instance, in the travel expense table, the cellcontaining the information "San Jose" could be placed in the "Location"category as follows:

  <TH id="a6" axis="location">San Jose</TH>

Any cell containing information related to "San Jose" should refer to thisheader cell via either the headers or the scope attribute. Thus, mealexpenses for 25-Aug-1997 should be marked up to refer to idattribute (whose value here is "a6") of the "San Jose" header cell:

 <TD headers="a6">37.74</TD>

Each headers attribute provides a list of id references. Authors may thuscategorize a given cell in any number of ways (or, along any number of"headers", hence the name).

Below we mark up the travel expense table with category information:

<TABLE border="1"  summary="This table summarizes travel expenses   incurred during August trips to   San Jose and Seattle"><CAPTION>  Travel Expense Report</CAPTION><TR>  <TH></TH>  <TH id="a2" axis="expenses">Meals</TH>  <TH id="a3" axis="expenses">Hotels</TH>  <TH id="a4" axis="expenses">Transport</TH>  <TD>subtotals</TD></TR><TR>  <TH id="a6" axis="location">San Jose</TH>  <TH></TH>  <TH></TH>  <TH></TH>  <TD></TD></TR><TR>  <TD id="a7" axis="date">25-Aug-97</TD>  <TD headers="a6 a7 a2">37.74</TD>  <TD headers="a6 a7 a3">112.00</TD>  <TD headers="a6 a7 a4">45.00</TD>  <TD></TD></TR><TR>  <TD id="a8" axis="date">26-Aug-97</TD>  <TD headers="a6 a8 a2">27.28</TD>  <TD headers="a6 a8 a3">112.00</TD>  <TD headers="a6 a8 a4">45.00</TD>  <TD></TD></TR><TR>  <TD>subtotals</TD>  <TD>65.02</TD>  <TD>224.00</TD>  <TD>90.00</TD>  <TD>379.02</TD></TR><TR>  <TH id="a10" axis="location">Seattle</TH>  <TH></TH>  <TH></TH>  <TH></TH>  <TD></TD></TR><TR>  <TD id="a11" axis="date">27-Aug-97</TD>  <TD headers="a10 a11 a2">96.25</TD>  <TD headers="a10 a11 a3">109.00</TD>  <TD headers="a10 a11 a4">36.00</TD>  <TD></TD></TR><TR>  <TD id="a12" axis="date">28-Aug-97</TD>  <TD headers="a10 a12 a2">35.00</TD>  <TD headers="a10 a12 a3">109.00</TD>  <TD headers="a10 a12 a4">36.00</TD>  <TD></TD></TR><TR>  <TD>subtotals</TD>  <TD>131.25</TD>  <TD>218.00</TD>  <TD>72.00</TD>  <TD>421.25</TD></TR><TR>  <TH>Totals</TH>  <TD>196.27</TD>  <TD>442.00</TD>  <TD>162.00</TD>  <TD>800.27</TD></TR></TABLE>

Note that marking up the table this way also allows user agents to avoidconfusing the user with unwanted information. For instance, if a speechsynthesizer were to speak all of the figures in the "Meals" column of thistable in response to the query "What were all my meal expenses?", a user wouldnot be able to distinguish a day's expenses from subtotals or totals. Bycarefully categorizing cell data, authors allow user agents to make importantsemantic distinctions when rendering.

Of course, there is no limit to how authors may categorize information in atable. In the travel expense table, for example, we could add the additionalcategories "subtotals" and "totals".

This specification does not require user agents to handle informationprovided by the axis attribute, nor does it make any recommendations abouthow user agents may present axis information to users or how users may querythe user agent about this information.

However, user agents, particularly speechsynthesizers, may want to factor out information common to severalcells that are the result of a query. For instance, if the user asks "What didI spend for meals in San Jose?", the user agent would first determine the cellsin question (25-Aug-1997: 37.74, 26-Aug-1997:27.28), then render thisinformation. A user agent speaking this information might read it:

   Location: San Jose. Date: 25-Aug-1997. Expenses, Meals: 37.74   Location: San Jose. Date: 26-Aug-1997. Expenses, Meals: 27.28

or, more compactly:

   San Jose, 25-Aug-1997, Meals: 37.74   San Jose, 26-Aug-1997, Meals: 27.28

An even more economical rendering would factor the common information andreorder it:

   San Jose, Meals, 25-Aug-1997: 37.74 26-Aug-1997: 27.28

User agents that support this type of rendering should allow user agents ameans to customize rendering (e.g., through style sheets).

11.4.3 Algorithm to findheading information

In the absence of header information from either the scope orheaders attribute, user agents may construct header informationaccording to the following algorithm. The goal of the algorithm is to find anordered list of headers. (In the following description of the algorithm the table directionality is assumed to beleft-to-right.)

• First, search left from the cell's position to find row header cells. Thensearch upwards to find column header cells. The search in a given directionstops when the edge of the table is reached or when a data cell is found aftera header cell.
• Row headers are inserted into the list in the order they appear in thetable. For left-to-right tables, headers are inserted from left to right.
• Column headers are inserted after row headers, in the order they appear inthe table, from top to bottom.
• If a header cell has the headers attribute set, then the headersreferenced by this attribute are inserted into the list and the search stopsfor the current direction.
• TD cells that set the axis attribute are also treated asheader cells.

11.5 Sample table

This sample illustrates grouped rows and columns. The example is adaptedfrom "Developing International Software", by Nadine Kano.

<TABLE border="2" frame="hsides" rules="groups"  summary="Code page support in different versions   of MS Windows."><CAPTION>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</CAPTION><COLGROUP align="center"><COLGROUP align="left"><COLGROUP align="center" span="2"><COLGROUP align="center" span="3"><THEAD valign="top"><TR><TH>Code-Page<BR>ID<TH>Name<TH>ACP<TH>OEMCP<TH>Windows<BR>NT 3.1<TH>Windows<BR>NT 3.51<TH>Windows<BR>95<TBODY><TR><TD>1200<TD>Unicode (BMP of ISO/IEC-10646)<TD><TD><TD>X<TD>X<TD>*<TR><TD>1250<TD>Windows 3.1 Eastern European<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1251<TD>Windows 3.1 Cyrillic<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1252<TD>Windows 3.1 US (ANSI)<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1253<TD>Windows 3.1 Greek<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1254<TD>Windows 3.1 Turkish<TD>X<TD><TD>X<TD>X<TD>X<TR><TD>1255<TD>Hebrew<TD>X<TD><TD><TD><TD>X<TR><TD>1256<TD>Arabic<TD>X<TD><TD><TD><TD>X<TR><TD>1257<TD>Baltic<TD>X<TD><TD><TD><TD>X<TR><TD>1361<TD>Korean (Johab)<TD>X<TD><TD><TD>**<TD>X<TBODY><TR><TD>437<TD>MS-DOS United States<TD><TD>X<TD>X<TD>X<TD>X<TR><TD>708<TD>Arabic (ASMO 708)<TD><TD>X<TD><TD><TD>X<TR><TD>709<TD>Arabic (ASMO 449+, BCON V4)<TD><TD>X<TD><TD><TD>X<TR><TD>710<TD>Arabic (Transparent Arabic)<TD><TD>X<TD><TD><TD>X<TR><TD>720<TD>Arabic (Transparent ASMO)<TD><TD>X<TD><TD><TD>X</TABLE>

  CODE-PAGE SUPPORT IN MICROSOFT WINDOWS===============================================================================Code-Page | Name | ACP  OEMCP | Windows Windows Windows ID |  | |  NT 3.1 NT 3.51 95-------------------------------------------------------------------------------   1200   | Unicode (BMP of ISO 10646)   | | X   X   *   1250   | Windows 3.1 Eastern European |  X | X   X   X   1251   | Windows 3.1 Cyrillic |  X | X   X   X   1252   | Windows 3.1 US (ANSI) |  X | X   X   X   1253   | Windows 3.1 Greek |  X | X   X   X   1254   | Windows 3.1 Turkish  |  X | X   X   X   1255   | Hebrew   |  X | X   1256   | Arabic   |  X | X   1257   | Baltic   |  X | X   1361   | Korean (Johab)   |  X | **  X------------------------------------------------------------------------------- 437   | MS-DOS United States | X   | X   X   X 708   | Arabic (ASMO 708) | X   | X 709   | Arabic (ASMO 449+, BCON V4)  | X   | X 710   | Arabic (Transparent Arabic)  | X   | X 720   | Arabic (Transparent ASMO) | X   | X===============================================================================