11 Tables

11.1 Introduction to Tables

The HTML table model allows authors to organize data - text, formatted text, images, links, forms, form fields, other tables, etc. - in rows and columns of cells.

Each table can be associated with a title (see the CAPTION element), which provides a brief description of the table. You can also specify a longer description (with the help of the summary attribute) for the convenience of people using agents based on Braille or speech.

The rows of the table can be grouped into sections of headings, lower headings and the body, (using the elements of THEAD , TFOOT and TBODY respectively). String groups convey additional structural information and can be generated by user agents in various ways that display this structure. User agents can use the subdivision into headings / body / lower headers to support the scrolling of the body regardless of the headers. When printing long tables, information from the headers can be repeated on each page of the table.

Authors can also group columns to provide additional structural information that can be used by user agents. Moreover, authors can declare column properties at the beginning of a table definition (using the COLGROUP and COL elements ) in such a way that allows user agents to generate the table sequentially, rather than waiting to read all the table data before starting the generation.

Table cells can contain a "header" (see element TH ) or "data" (see element TD ). Cells can span multiple rows or columns. The HTML 4.0 table model allows authors to tag each cell, so that non-visual user agents will be easier to work with cell information. These mechanisms not only make it much easier for users with physical disabilities, but also make it possible to handle tables for multi-mode wireless browsers with limited display capabilities (for example, Web-compatible pagers and phones).

Do not use tables only as a means of linking the contents of a document, as this can cause problems when generating for non-visual means. In addition, if labels are used with graphics, this can cause users to have to scroll horizontally to view a table created in a large screen system. To reduce the possibility of these problems, authors should use the stylesheet to link the document, not the table.

  <TABLE border = "1"
  Summary = "This table contains some statistics about fruit flies:
  Average height and weight, percentage of flies with red eyes (of males and females). ">
 <CAPTION> <EM> Test table with merged cells </ EM> </ CAPTION>
 <TR> <TH rowspan = "2"> <TH colspan = "2"> Medium
  <TH rowspan = "2"> Red eyes <BR>
 <TR> <TH> height <TH> weight
 <TR> <TH> male gender <TD> 1.9 <TD> 0.003 <TD> 40%
 <TR> <TH> female gender <TD> 1.7 <TD> 0.002 <TD> 43%
 </ TABLE>

  Test table with merged cells
  / ------------------------------------------------- --------- \
  | | |  | | |  Medium |  Red |
  | | |  | ------------------- |  Eyes |
  | | |  | | |  Height |  Weight |  | | |
  | ------------------------------------------------- --------- |
  | | |  Male sex |  1.9 |  0.003 |  40% |  | | |
  | ------------------------------------------------- --------- |
  | | |  Female sex |  1.7 |  0.002 |  43% |  | | |
  \ ------------------------------------------------- --------- /

11.2 Elements of the construction of tables

11.2.1 The TABLE element

  <! ELEMENT TABLE - -
  (CAPTION ?, (COL * | COLGROUP *), THEAD ?, TFOOT ?, TBODY +)>
 <! ATTLIST TABLE - table -
  % Attrs;
  - % coreattrs , % i18n , % events -
  Summary % Text;
  #IMPLIED - target / structure for voice output -
  Width % Length;
  #IMPLIED - table width -
  Border % Pixels;
  #IMPLIED - the thickness of the frame around the table -
  Frame % TFrame;
  #IMPLIED - what parts of the frame you want to generate -
  Rules % TRules;
  #IMPLIED - rulings between rows and columns -
  Cellspacing % Length;
  #IMPLIED - distance between cells -
  Cellpadding % Length;
  #IMPLIED - distance within cells -
  >

Start tag: required , end tag: required

The TABLE element contains all other elements that define the title, lines, content, and formatting.

The following list describes what operations a user agent can perform when generating tables:

• Providing the user with information about the table . Authors should provide brief information about the content and structure of the table so that people working with non-visual user agents can better understand it.
• Generate a caption, if it is defined.
• Generate the top header of the table, if it is defined. Generate the lower header if it is defined. User agents need to know where to generate the top and bottom headers. For example, if the output tool is divided into pages, user agents can place the top header at the top of each page, and the bottom one at the bottom. Likewise, if the user agent provides a mechanism for scrolling rows, the top header can be displayed at the top of the scrollable area, and the bottom one at the bottom.
• Calculate the number of columns in a table. Remember that the number of rows in the table is equal to the number of TR elements contained in the TABLE element.
• Group columns according to the specifications of the column groups .
• Line-by-line cell generation and grouping in columns between the top and bottom headers. Visual user agents must format tables according to HTML attributes and style sheet specifications.

The HTML table model is designed so that, with the help of the author, user agents can generate tables sequentially (i.e., as the table rows are received), rather than wait for the entire table to be generated before the generation starts.

In order for user agents to format the table in a single pass, the authors must provide the following information to user agents:

• The number of columns in the table. For more information about how to specify this information, see the section on counting the number of columns in a table .
• The width of the columns. For more information about how to specify this information, see the section on counting the width of columns .

More specifically, a user agent can generate a table in one pass when the column width is specified using a combination of the COLGROUP and COL elements . If a column indicates the relative width or width in percent (see the section on calculating column widths ), authors must also specify the width of the table itself.

Table direction  

The table direction is either inherited (by default, the direction is used from left to right), or is determined by the dir attribute of the TABLE element.

For tables whose direction is from left to right, the zero column is on the left, and the zero line is on the top. For tables whose direction is from right to left, the zero column is on the right, and the zero line is on the top.

If the allots user agent is in the additional cells row (see the section on counting the number of columns in the table ), additional row cells are added to the table on the right for tables that have a direction from left to right, and on the left for tables that have a direction from right to left.

Remember that TABLE is the only element for which the dir attribute reverses the visual order of the columns; You can not change the order of a single row ( TR ) or a column group ( COLGROUP ).

If the dir attribute is set for the TABLE element, it also affects the direction of the text in the cells of the table (since the dir attribute is inherited by the block-level elements).

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

You can change the direction of text in individual cells by setting the dir attribute for the cell defining cell. For more information on the direction of text, see the section on bidirectional text .

11.2.2 Captions of tables: CAPTION element

 <! ELEMENT CAPTION - - ( % inline; ) * - caption of the table -> <! ENTITY% CAlign "(top | bottom | left | right)"> <! ATTLIST CAPTION % attrs;
  - % coreattrs , % i18n , % events -> 

Start tag: required , end tag: required

If the CAPTION element is present, its text should describe the subject of the table. The CAPTION element can be placed only immediately after the initial TABLE tag. A TABLE element can include only one CAPTION element.

Visual user agents allow sighted people to quickly grasp the table structure from headers and caption. The consequence of this is that captions will not coincide with brief descriptions of the purpose and structure of the table from the point of view of people using non-visual agents.

Thus, authors should take care of providing additional information describing the purpose and structure of the table using the summary attribute of the TABLE element. This is especially important for tables that do not have captions. The examples below show the use of the summary attribute.

Visual user agents should avoid clipping any part of the table, including caption, if the means of access to all parts is not provided, for example, using horizontal or vertical scrolling. We recommend that the caption text be split so that it has the same width as the table. (See also section on recommended layout algorithms .)

11.2.3 Row groups: THEAD , TFOOT, and TBODY elements

  <! ELEMENT THEAD - O (TR) + - the title of the table ->
 <! ELEMENT TFOOT - O (TR) + - the lower title of the table ->

Start tag: required , end tag: optional

  <! ELEMENT TBODY OO (TR) + - the body of the table ->

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

The rows of the table can be grouped into headings, lower headings and one or more sections of the table body using the elements THEAD , TFOOT and TBODY, respectively. This unit allows the user agents to maintain the scrolling of the table body regardless of the headers. When printing long tables, the information from the headers can be repeated on each page on which there are table data.

The table headers must contain information about the columns of the table. The table body must contain the data rows of the table.

If the elements THEAD , TFOOT and TBODY are present, each of them contains a group of rows . Each group of lines must contain at least one line defined by the TR element.

  <TABLE>
 <THEAD>
  <TR> ... heading ... </ THEAD>
 <TFOOT>
  <TR> ... the lower heading ... </ TFOOT>
 <TBODY>
  <TR> ... the first row of data of block 1 ... <TR> ... the second row of data of block 1 ... </ TBODY>
 <TBODY>
  <TR> ... the first data line of block 2 ... <TR> ... the second data line of block 2 ... <TR> ... the third row of data of block 2 ... </ TBODY>
 </ TABLE>

The TFOOT element must be located before the TBODY element in the TABLE definition so that the user agents can generate the lower header before receiving all (possibly multiple) data lines. The following is a summary of mandatory tags and tags that can be omitted:

• The initial TBODY tag is always required, unless the table contains a single body without upper and lower headers. The final TBODY tag can always be omitted.
• The initial tags for the elements THEAD and TFOOT are mandatory if the table contains upper and lower headers, but the corresponding end tags can be omitted.

The corresponding user agent specification when parsing must obey these rules for reasons of compatibility with previous versions.

  <TABLE>
 <THEAD>
  <TR> ... the top header ... <TFOOT>
  <TR> ... the lower header ... <TBODY>
  <TR> ... the first data line of block 1 ... <TR> ... the second row of data of block 1 ... <TBODY>
  <TR> ... the first data line of block 2 ... <TR> ... the second data line of block 2 ... <TR> ... the third row of data of block 2 ... </ TABLE>

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

11.2.4 Column groups: COLGROUP and COL elements

Column groups allow you to create structural units within a table. Authors can select this structure using style sheets or HTML attributes (for example, the rules attribute for the TABLE element). For an example of a visual representation of a column group, see the example table .

A table can contain one implicit column group (the COLGROUP element does not separate the columns) or any number of explicit column groups (each of which is separated by one instance of the COLGROUP element).

The COL element allows authors to use the same attributes in different columns without using a structural grouping. "Span" of the COL element is the number of columns that use the attributes of this element.

COLGROUP element  

  <! ELEMENT COLGROUP - O (col) * - group of columns of the table ->
 <! ATTLIST COLGROUP
  % Attrs;
  - % coreattrs , % i18n , % events - span NUMBER 1 - number of columns in the group, used by default - width % MultiLength;
  #IMPLIED - width for nested COL elements, used by default - % 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 of columns in a group can be specified in two mutually exclusive ways:

1. The span attribute of the element (the default value is 1) specifies the number of columns in the group.
2. Each COL element in COLGROUP represents one or more columns in a group.

The advantage of using the span attribute is that authors can group column width information. Thus, if the table contains forty columns, each of which has a width of 20 pixels, it's easier to write:

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

than:

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

If you want to select a column (for example, for style information, for specifying width information, etc.) in a group, authors must define this column using the COL element. So, to apply special style information to the last column of the previous table, we select it as follows:

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

The width attribute of the COLGROUP element inherits all forty columns. The first COL element refers to the first 39 columns (nothing special for them doing), and the second assigns an id value to the 40th column, so that it can be referenced in style sheets.

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

Element COL  

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

Start tag: required, End tag: forbidden

The COL element allows authors to group attribute definitions for table columns. The COL attribute does not group the columns structurally - this role is played by the COLGROUP element. The COL elements are empty and serve only to maintain attributes. They can be inside or outside an explicit column group (that is, the COLGROUP element).

The width attribute for the COL element indicates the width of each column in the span element.

Counting the number of columns in a table  

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

1. If a TABLE element includes COLGROUP or COL elements, user agents must count the number of columns by adding the following numbers:
   • For each COL element, the value of its span attribute (default is 1).
   • For each COLGROUP element that contains at least one COL element, ignore the span attribute for the COLGROUP element. For each COL element, perform the calculation from step 1.
   • For each empty COLGROUP element, the value of its span attribute (default is 1).
2. Otherwise, if the TABLE element does not contain the COLGROUP or COL elements , the user agents determine the number of columns from what is needed for the rows. The number of columns is equal to the number of columns required by the row with the largest number of columns, including cells, span several columns. For any row with fewer columns, the end of this line will be supplemented by empty cells. The "end" of the string depends on the direction of the table .

If the table contains the elements COLGROUP or COL , and these two ways of counting give different results, this is an error.

When the user agent has calculated the number of columns in the table, it can group them into column groups.

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

Counting Column Widths  

Authors can specify column widths in three ways:

Fixed

Specifying a fixed width is given in pixels (for example, width = "30"). The use of a fixed width allows the use of serial generation.

In percentages

Specifying a width in percent (for example, width = "20%") means the percentage of the horizontal space available for the table (between the current left and right fields, including floats). Remember that this space does not depend on the table itself, so specifying the width in percent allows you to use serial generation.

Proportional

Specifying a proportional width (for example, width = "3 *") means the number of parts of the horizontal space required for the table. If the width of the table is defined as a fixed value (using the width attribute of the TABLE element), user agents can generate a table in sequence and with a proportional width.

However, if the table width is not fixed, user agents must obtain all the table data before they can determine the horizontal space required for the table. Only then can this space be distributed among the columns for which the proportional width is indicated.

If the author does not specify width information for the column, the user agent can not format the table sequentially, because he will have to wait for all the column data to be retrieved to determine its width.

If the width specified for the column is not sufficient to accommodate the contents of any cell, user agents can reformat 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> ... ... lines ... </ TABLE>

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

11.2.5 Rows of the table: element TR

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

Start tag: required , End tag: optional

The TR elements serve as containers for a row of table cells. The end tag can be omitted.

  <TABLE summary = "This table shows the graph of the number
  Cups of coffee, drunk by each senator, type
  Coffee (decaffeinated or plain) and the presence of sugar. ">
 <CAPTION> How many cups of coffee each senator drinks </ CAPTION>
 <TR> ... The header line ... <TR> ... The first data line ... <TR> ... The second data line ... ... the continuation of the table ... </ TABLE>

11.2.6 Table cells: TH and TD elements

  <! ELEMENT ( TH | TD ) - O ( % flow; ) * - the cell of the table header, the data cell of the table ->
 <! - For most tables, the scope attribute is simpler than the axes -> attribute
 <! ENTITY% Scope "(row | col | rowgroup | colgroup)">
 <! - TH is used for headers, TD is for data, but for cells serving both, use TD ->
 <! ATTLIST (TH | TD) - header of the data cell - % attrs;
  - % coreattrs , % i18n , % events - abbr % Text;
  #IMPLIED - abbreviation for the header cell - axis CDATA #IMPLIED - groups of related header names - headers IDREFS #IMPLIED - list of id for headers - scope % Scope;
  #IMPLIED - header cells area - rowspan NUMBER 1 - number of lines spanned by a cell - colspan NUMBER 1 - number of columns spanned by a cell - % cellhalign;
  - horizontal alignment in cells - % cellvalign;
  - vertical alignment in cells -
  >

Start tag: required , End tag: optional

Table cells can contain information of two types: header information and data. This difference allows user agents to generate header and data cells in various ways, even when there are no style sheets. For example, visual user agents can represent the text of the header cells in bold. Speech synthesizers can allocate header information by voice.

The TH element defines a cell containing the header information. Two parts of the header information are available to the user agents: the content of the TH element and the value of the abbr attribute. User agents must generate the contents of the cell or the value of the abbr attribute. For visual devices, the latter can make sense if the space for generating the full cell content is insufficient. For non-visual devices, abbr can be used as a reduction for table headers when they are generated along with the contents of the cells to which they relate.

The headers and scope attributes also allow authors to help non-visual user agents in processing header information. For detailed information and examples, see the section on marking cells for non-visual user agents .

The TD element defines the cell containing the data.

The cell can be empty (that is, do not contain data).

 <TABLE summary = "This table shows the graph of the number of cups of coffee drunk by each senator, the type of coffee (without caffeine or normal), and the presence of sugar."> <CAPTION> How many cups of coffee do each senator drink? </ CAPTION> <TR> <TH > Name </ TH> <TH> Number of cups </ TH> <TH> Type of coffee </ TH> <TH> Sugar? </ TH> <TR> <TD>  Sexton </ TD> <TD> 10 </ TD> <TD> Espresso </ TD> <TD> No </ TD> <TR> <TD>  Dinen </ TD> <TD> 5 </ TD> <TD> Without caffeine </ TD> <TD> Yes </ TD> </ TABLE> 

  Name Number of cups Type of coffee Sugar?

 T. Sexton 10 Espresso No
 J. Dinnen 5 Without caffeine Yes

Cells, span multiple rows or columns  

Cells can span several rows or columns. The number of rows or columns spanned by the cell is set using the rowspan and colspan attributes of the TH and TD elements.

  <TABLE border = "1">
 <CAPTION> How many cups of coffee each senator drinks </ CAPTION>
 <TR> <TH> Name <TH> Number of cups <TH> Type of coffee <TH> Sugar?
 <TR> <TD> T.  Sexton <TD> 10 <TD> Espresso <TD> No
 <TR> <TD> J.  Dinenne <TD> 5 <TD> Without caffeine <TD> Yes
 <TR> <TD> A.  Soria <TD colspan = "3"> <em> No data </ ​​em>
 </ TABLE>

 How many cups of coffee are drunk by each senator? -------------------------------------------- - | |  Name | Number of cups | Type of coffee | Sugar? |  ---------------------------------------------- | T.  Sexton | 10 | Espresso | No |  ---------------------------------------------- | J.  Dinnen | 5 | Without caffeine | Yes |  ---------------------------------------------- | A.  Soria | No information |  ---------------------------------------------- 

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

The definition of overlapping cells is an error. User agents can handle this error differently (for example, they can generate these tables differently).

  <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 Formatting tables with visual user agents

In HTML 4.0, there are mechanisms for managing:

• Border styles
• Horizontal and vertical alignment of cells
• And cell fields

11.3.1 Boundaries and rules

The following attributes affect the internal frames and internal rules of the table.

  <TABLE border = "1" 
  Summary = "This table shows the data
  On the number of cups of coffee consumed by each 
  Senator, coffee type (decaffeinated or ordinary) 
  And the presence of sugar. ">
 <CAPTION> How many cups of coffee each senator drinks </ CAPTION>
 <TR>
  <TH> First Name </ TH>
  <TH> Number of 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.  Dinenne </ TD>
  <TD> 5 </ TD>
  <TD> Without caffeine </ 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 considered by user agents to ensure compatibility with previous versions.

• Setting border = "0" implies frame = "void" and, unless otherwise specified, rules = "none".
• Other border values ​​assume frame = "border" and, unless otherwise specified, rules = "all".
• The value "border" in the initial tag of the TABLE element should be interpreted as the value of the frame attribute. It is assumed that rules = "all" and some standard value (not null) for the border attribute is used.

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

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

11.3.2 Horizontal and vertical alignment

For the various elements of the table, you can set the following attributes (see their definitions).

  <! - attributes of horizontal alignment of the contents of the cell ->
 <! ENTITY% cellhalign "#IMPLIED char % Character; #IMPLIED - alignment characters, for example char = ':' - charoff % Length; #IMPLIED - indentation of the alignment character - "> <! - attributes of vertical alignment of cell contents -> <! ENTITY% cellvalign" valign (top | middle | bottom | baseline) #IMPLIED ">

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

  ------------------------------
 | | |  Vegetables | Price per kg |
 | -------------- | ------------- |
 | Lettuce |  $ 1 |
 | -------------- | ------------- |
 | Silver carrots |  $ 10.50 |
 | -------------- | ------------- |
 | Golden turnips |  $ 100.30 |
 ------------------------------

If the cell contains several instances of alignment symbols specified in the char attribute and the cell content is transferred to another line, the behavior of the user agent is undefined. Therefore, authors should carefully use the char attribute.

Inheritance of alignment parameters  

Cell alignment can be specified for each cell or inherited from top-level elements such as a row, column, or table itself.

Priority (from highest to lowest) of the attributes align , char and charoff is as follows:

1. The alignment attribute set for the element in the cell data (for example, P ).
2. The alignment attribute set in the cell ( TH and TD ).
3. The alignment attribute set in the column grouping element ( COL and COLGROUP ). If the cell is part of a span of several columns, the alignment property is inherited from the cell definition at the beginning of span.
4. The alignment attribute set in the row element or line grouping ( TR , THEAD , TFOOT, and TBODY ). If the cell is part of a span of several lines, the alignment property is inherited from the cell definition at the beginning of the span.
5. The alignment attribute set in the table ( TABLE ).
6. The default alignment value.

The priority (from the highest to the lowest) of the valign attribute (as well as other inherited attributes of lang , dir, and style ) is:

1. The attribute set for the element in the cell data (for example, P ).
2. The attribute set for the cell ( TH and TD ).
3. An attribute that is set for a row element or line grouping ( TR , THEAD , TFOOT, and TBODY ). If the cell is part of a span of many rows, the attribute value is inherited from the cell definition at the beginning of the span.
4. The attribute set for the column grouping element ( COL and COLGROUP ). If a cell is part of a span of many columns, the attribute value is inherited from the cell definition at the beginning of span.
5. The attribute set for the table ( TABLE ).
6. The value of the default attribute.

In addition, when you generate cells, the horizontal alignment is first defined for the columns, and then for the rows, and the vertical alignment for the rows, and then for the columns.

The default cell alignment depends on the user agent. However, user agents must substitute the default attribute according to the current direction (that is, not just "left" in all cases).

User agents that do not support the "justify" value of the align attribute must use the value corresponding to the direction.

11.3.3 Cell Fields

These two attributes control the distance between and within cells. They are explained in the following illustration:

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

If the table or this column has a fixed width, cellspacing and cellpadding can occupy more space than assigned. User agents can give these attributes a priority over the width attribute in the event of a conflict, but they do not need to do this.

11.4 Generating tables by non-visual user agents

11.4.1 Communication of header information with data cells

Non-visual user agents, such as speech synthesizers and devices based on the Braille alphabet, can use the following attributes of TD and TH elements for more intuitive generation of table cells:

• For this data cell, the headers attribute lists which cells contain pertinent header information. To this end, each header cell should receive a name using the id attribute. Remember that it is not always possible to explicitly divide cells into headers and data. In such a cell, use the TD element together with the attributes id or scope .
• For this header cell, the scope attribute tells the user agent of the data cell whose information is indicated by this header. Authors can use this attribute instead of headers , depending on what is more convenient; These two attributes have the same function. The headers attribute is usually needed if the headers are placed in a non-standard position relative to the data to which they are applied.
• The abbr attribute specifies an abbreviated header for the header cells, so that the user agents can generate header information more quickly.

  <TABLE border = "1" 
  Summary = "This table provides information on how much
  Each senator drinks coffee, about the type of coffee
  (Without caffeine or normal) and about sugar. ">
 <CAPTION> How many cups of coffee each senator drinks </ CAPTION>
 <TR>
  <TH id = "t1"> Name </ TH>
  <TH id = "t2"> How much </ 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"> None </ TD>
 <TR>
  <TD headers = "t1"> J.  Dinenne </ TD>
  <TD headers = "t2"> 5 </ TD>
  <TD headers = "t3"> Without caffeine </ TD>
  <TD headers = "t4"> Yes </ TD>
 </ TABLE>

  Title: How many cups of coffee are drunk by each senator
 Summary: This table provides information on how much
  Each senator drinks coffee, about the type of coffee
  (Without caffeine or normal) and about sugar.
 Name: T. Sexton, How much: 10, Type: Espresso, Sugar: No
 Name: J. Dinnen, How much: 5, Type: Decaffeinated, Sugar: Yes

  <TABLE border = "1" 
  Summary = "This table provides information on how much
  Each senator drinks coffee, about the type of coffee
  (Without caffeine or normal) and about sugar. ">
 <CAPTION> How many cups of coffee each senator drinks </ CAPTION>
 <TR>
  <TH scope = "col"> Name </ TH>
  <TH scope = "col"> How many </ 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.  Dinenne </ TD>
  <TD> 5 </ TD>
  <TD> Without caffeine </ TD>
  <TD> Yes </ TD>
 </ TABLE>

 <TABLE border = "1" cellpadding = "5" cellspacing = "2"
  Summary = "Historical courses offered by Bat County,
  Ordered by name, teacher, description, 
  Code and cost ">
  <TR>
  <TH colspan = "5" scope = "colgroup"> Courses - Bath, Fall 1997 </ TH>
  </ TR>
  <TR>
  <TH scope = "col" abbr = "Name"> Course name </ TH>
  <TH scope = "col" abbr = "Teacher"> Course Instructor </ TH>
  <TH scope = "col"> Description </ TH>
  <TH scope = "col"> Code </ TH>
  <TH scope = "col"> Cost </ TH>
  </ TR>
  <TR>
  <TD scope = "row"> After the Civil War </ TD>
  <TD> Dr. John Rowton </ TD>
  <TD>
  In this course, the turbulent years in England are studied after 1646.
  <EM> 6 weekly classes starting on Monday, October 13. </ EM>
  </ TD>
  <TD> H27 </ TD>
  <TD> & pound; 32 </ TD>
  </ TR>
  <TR>
  <TD scope = "row"> Anglo-Saxon England - introduction </ TD>
  <TD> Mark Cottle </ TD>
  <TD>
  One-day course - an introduction to the early medieval period
  Reconstruction of the Anglo-Saxon society.  <EM> Saturday, 18
  October. </ EM>
  </ TD>
  <TD> H28 </ TD>
  <TD> & pound; 18 </ TD>
  </ TR>
  <TR>
  <TD scope = "row"> Greece </ TD>
  <TD> Valerie Lorenz </ TD>
  <TD>
  The cradle of democracy, philosophy, the heart of the theater, the birthplace of the argument.  This could be done by the Romans, if the Greeks did not get ahead of them.  <EM> Saturday School October 25, 1997 </ EM>
  </ TD>
  <TD> H30 </ TD>
  <TD> & pound; 18 </ TD>
  </ TR>
 </ TABLE>

11.4.2 Categorizing Cells

Perhaps users viewing a table using speech agents will want to hear an explanation of the contents of the cell in addition to the information itself. One of the ways a user agent can provide explanations is to pronounce the corresponding header information before saying the information that is the contents of the cell (see section on linking header information to data cells ).

Users may also need information about several cells, in which case the header information specified at the cell level (using headers , scope , and abbr ) may not correspond to the context. Consider the following table with a classification of spending on food, hotels and transportation in two locations (San Jose and Seattle) in a few days:

Users will need to extract information from the table in the form of queries:

• "How much money did I spend on food?"
• "How much did I spend on food on August 25?"
• "How much money did I spend in San Jose?"

Each request implies calculations performed by the user agent, which can affect several or no cells. To determine, for example, food costs on August 25th, the user agent must know which table cells belong to the "Food" (all these cells), and which to the "Dates" (August 25), and to find the intersection of the two sets.

To accept this type of query, the HTML 4.0 table model allows authors to place headers and cell data in a category. For example, in the travel expense table, the author can group the "San Jose" and "Seattle" header cells in the "Item" category, the "Food", "Hotels" and "Transportation" headings in the "Expenses" category, and four days in the category "Date". Then the previous three questions will have the following meaning:

• "How much money did I spend on food?" Means "All data cells from the category" Expenditure = Food "?
• "How much did I spend on food on August 25?" Means "All data cells from the categories" Expenditure = Food "and" Date = 25-Aug-1997 "?
• "How much money did I spend in San Jose?" Means "All data cells from the categories" Expenditure = Food, Hotels, Transport "and" Item = San Jose "?

The authors define the categories of headers or data cells, setting the axis attribute for the cell. For example, in the travel expense table, a cell containing information "San Jose" can be placed in the "Item" category as follows:

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

Any cell containing information related to San Jose must refer to this header cell using the headers or scope attribute. Thus, the cost of food on 25-Aug-1997 should have a link to the id attribute (whose value here is "a6") of the header cell "San Jose":

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

Each headers attribute contains a list of id references . Authors can thus define categories for a given cell using this series of methods (or along any number of "headers", hence the name).

Below in the table of travel expenses the information on categories is indicated:

  <TABLE border = "1"
  Summary = "This table contains information about the 
  Travel Expenses in August 
  In San Jose and Seattle ">
 <CAPTION>
  Travel expense report
 </ CAPTION>
 <TR>
  <TH> </ TH>
  <TH id = "a2" axis = "expenses"> Food </ TH>
  <TH id = "a3" axis = "Expenses"> Hotels </ TH>
  <TH id = "a4" axis = "costs"> Transportation </ TH>
  <TD> total </ TD>
 </ TR>
 <TR>
  <TH id = "a6" axis = "item"> 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> total </ TD>
  <TD> 65.02 </ TD>
  <TD> 224.00 </ TD>
  <TD> 90.00 </ TD>
  <TD> 379.02 </ TD>
 </ TR>
 <TR>
  <TH id = "a10" axis = "point"> 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> total </ TD>
  <TD> 131.25 </ TD>
  <TD> 218.00 </ TD>
  <TD> 72.00 </ TD>
  <TD> 421.25 </ TD>
 </ TR>
 <TR>
  <TH> Total </ TH>
  <TD> 196.27 </ TD>
  <TD> 442.00 </ TD>
  <TD> 162.00 </ TD>
  <TD> 800.27 </ TD>
 </ TR>
 </ TABLE>

Note that such a table layout also allows user agents not to confuse users with unnecessary information. For example, if the speech synthesizer had to pronounce all the digits from the "Food" column of this table in response to the "All food costs?" Request, the user would not be able to distinguish between daily expenses and the total amount. By carefully categorizing data, authors allow user agents to make important semantic differences when generating.

Of course, the authors are not limited in the categorization of information in the table. In the travel expenses table, for example, we can enter additional categories "total" and "total".

This specification does not require users to process information provided by the axis attribute, nor does it provide any advice on how user agents should provide information from the axis attribute or the specification of requests by users of this information to agents.

However, user agents, especially speech synthesizers, can allocate information common to several cells that are query results. For example, if a user asks "How much money have I spent on food in San Jose?", The user agent must determine the appropriate cells (25-Aug-1997: 37.74, 26-Aug-1997: 27.28), and then generate the information. The user agent can say the following information:

  Item: San Jose.  Date: 25-Aug-1997.  Expenditure, Food: 37.74
  Item: San Jose.  Date: 26-Aug-1997.  Expenditure, Food: 27.28

Or more compactly:

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

Even more economical generation can provide even more general information and reorder it:

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

User agents that support generation of this type must provide customization tools for generating (for example, using style sheets).

11.4.3 Algorithm for searching header information

In the absence of header information in the scope attribute or headers, user agents can compose this information according to the following algorithm. The purpose of the algorithm is to find an ordered list of headers. (In the following description of the algorithm, the direction of the table is from left to right.)

• First, a search is performed to the left of the cell position to determine the cell of the row header. Then, an upward search is performed to determine the column header cell. The search in the specified direction is terminated if the edge of the table is reached or a data cell is found after the header cell.
• Line headings are placed in the list in the order in which they are located in the table. For left-to-right tables, headings are placed from left to right.
• The column headings are placed after the line headings, in the order in which they are located in the table, from top to bottom.
• If the headers attribute is set to the headers attribute, the headers referenced by this attribute are placed in the list, and the search for the current direction is terminated.
• The TD cells in which the axis attribute is set are treated in the same way as the header cells.

11.5 Example of a table

This example shows the grouped rows and columns. An example is taken from the book "Development of International Software" by Nadine Cano.

  <TABLE border = "2" frame = "hsides" rules = "groups"
  Summary = "Support for code pages in different versions of MS Windows.">
 <CAPTION> SUPPORT CODE PAGES 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 ID <BR>
 <TH> Title
 <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 East 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 USA (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> US MS-DOS <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>

  SUPPORT CODE PAGES IN MICROSOFT WINDOWS 
 ================================================== ===============================
 ID code |  Title |  ACP OEMCP |  Windows Windows Windows
 Pages |  | | |  | | |  NT 3.1 NT 3.51 95
 -------------------------------------------------- -------------------------------
  1200 |  Unicode (BMP of ISO 10646) |  | | |  XX *
  1250 |  Windows 3.1 East European |  X |  XXX
  1251 |  Windows 3.1 Cyrillic |  X |  XXX
  1252 |  Windows 3.1 United States (ANSI) |  X |  XXX
  1253 |  Windows 3.1 Greek |  X |  XXX
  1254 |  Windows 3.1 Turkish |  X |  XXX
  1255 |  Hebrew |  X |  X
  1256 |  Arab |  X |  X
  1257 |  The Baltic |  X |  X
  1361 |  Korean (Johab) |  X |  ** x
 -------------------------------------------------- -----------------------------
  437 |  USA MS-DOS |  X |  XXX
  708 |  Arab (ASMO 708) |  X |  X
  709 |  Arab (ASMO 449+, BCON V4) |  X |  X
  710 |  Arabic (Transparent Arabic) |  X |  X
  720 |  Arabic (Transparent ASMO) |  X |  X
 ================================================== =============================