Tables [Robin’s HTML 4.0 Conformance Test]
Author: Lionheart, Robin
Description: Test your Web browser’s support for tables. Part of Robin’s HTML 4.0 Conformance Test.
Keywords: scrolling tables, table borders, row groups, column groups, accessibility, summary, scope, headers, axis

# Tables (§11)

## Row and column groups

- `<thead>`, `<tfoot>`, and `<tbody>` group table rows into a header, a footer, and one or more body sections.

  At this writing, no Web browsers to my knowledge put this feature to either of the interesting uses suggested by the official specification: This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data.

  Related Mozilla bug reports: thead-UI.

- `<colgroup>` groups columns together into divisions. (Rows are grouped with `<tbody>`.)
- `<col>` applies its parameters to a table column.

- `rules` declares where borders are drawn between cells.

XHTML 2.0: The W3C is considering eliminating the presentational `rules` attribute in XHTML 2.0.

### Example:

The `rules` attribute can take these five values.

#### Here is a sample table of filtering features in major Web browsers. It should have no border and no rules:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has the default value of `rules="none"`. It should have no rules:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `rules="rows"`. It should have rules between rows only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `rules="cols"`. It should have rules between columns only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `rules="all"`. It should have rules between both rows and columns:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `rules="groups"`. It should only have rules between the row groups (between the header and body) and between the column groups:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

Related Mozilla bug reports: Table-Rules.

Related Konqueror bug reports: #47412.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

- `frame` declares on which sides borders are drawn around the table.

XHTML 2.0: Like `rules`, `frame` too may be on the chopping block.

### Example:

The `code` attribute can take these values.

#### This table has the default value of `frame="void"`. There should be no border.

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="box"`. There should be a border on all four sides of the table:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="hsides"`. There should be a border on the top and bottom sides of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="vsides"`. There should be a border on the left and right sides of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="above"`. There should be a border at the top of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="below"`. There should be a border at the bottom of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="lhs"`. There should be a border at the left of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

#### This table has `frame="rhs"`. There should be a border at the right of the table only:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

Related Mozilla bug reports: Table-Rules.

Related Konqueror bug reports: #47412.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

## Alignment and style

Columns and column groups can be used to apply alignment or style properties to every cell in a column.

- `char` specifies a character to align a column around when character alignment is used.

### Example:

<table frame="void" rules="groups">
<caption>Grocery Bill</caption>
<colgroup>
<col align="left">
<col align="char" char=".">
<col align="right">
<colgroup>
<col align="char" char=".">
<thead>
<tr>
<th>Item
<th align="right">Unit Cost
<th>Qty.
<th align="right">Price
<tfoot>
<tr>
<th colspan=3 align="right">Total
<td>$11.97
<tbody>
<tr><td>Cookies <td>2.49 <td>2 <td>4.98
<tr><td>Soda <td>.99 <td>1 <td>.99
<tr><td>Ice Cream <td>6 <td>1 <td>6.
</table>

#### The decimal points should be lined up like this:

              Grocery Bill

    Item         Unit   Qty. |  Price
    -------------------------+-------
    Cookies      2.49      1 |   4.98
    Soda          .99      1 |    .99
    Ice Cream    6         1 |   6.
    -------------------------+-------
                       Total | $11.97

#### Your Web browser renders it like this:

Grocery Bill
Item | Unit Cost | Qty. | Price
--- | --- | --- | ---
Total | $11.97
Cookies | 2.49 | 2 | 4.98
Soda | .99 | 1 | .99
Ice Cream | 6 | 1 | 6.

Related Mozilla bug reports: Column, Character-Alignment, Table-Rules.

Related Konqueror bug reports: #29577.

You can also set styles on columns and column groups, but according to the CSS2 standard, only the `border`, `background`, `width`, and `visibility` descriptions apply to columns and column groups.

### Example:

Let’s add a little style to the previous example.

<table frame="void" rules="groups">
<caption>Grocery Bill</caption>
<colgroup style="background-color: #acc">
<col align="left">
<col align="char" char="." style="border-left-style: dotted">
<col align="right">
<colgroup>
<col align="char" char="." style="background-color: #aca">
<thead>
<tr>
<th>Item
<th align="right">Unit Cost
<th>Qty.
<th align="right">Price
<tfoot>
<tr>
<th colspan=3 align="right">Total
<td>$11.97
<tbody>
<tr><td>Cookies <td>2.49 <td>2 <td>4.98
<tr><td>Soda <td>.99 <td>1 <td>.99
<tr><td>Ice Cream <td>6 <td>1 <td>6.
</table>

#### It should be rendered similar to this:

              Grocery Bill

    Item       : Unit   Qty. |  Price
    -------------------------+-------
    Cookies    : 2.49      1 |   4.98
    Soda       :  .99      1 |    .99
    Ice Cream  : 6         1 |   6.
    -------------------------+-------
                       Total | $11.97

#### Your Web browser renders it like this:

Grocery Bill
Item | Unit Cost | Qty. | Price
--- | --- | --- | ---
Total | $11.97
Cookies | 2.49 | 2 | 4.98
Soda | .99 | 1 | .99
Ice Cream | 6 | 1 | 6.

Related Mozilla bug reports: Column, Character-Alignment, Table-Rules.

Related Konqueror bug reports: #29577.

## Accessibility for nonvisual Web browsers (§11.4)

- `summary` provides a long description of table contents.
- `scope` specifies whether a header cell provides information for a row, column, row group, or column group.
- `headers` lists which table cells provide header information for that cell.

XHTML 2.0: The W3C is considering changing `summary` from an attribute to a `<summary>` element within `<table>`, so that it can contain markup.

### Example:

Instead of colors, let’s add some attributes to the previous table to help speech synthesizers read it aloud.

<table frame="void" rules="groups" summary="The total for cookies, soda, and ice cream is $11.97.">
<caption>Grocery Bill</caption>
<colgroup>
<col align="left">
<col align="char" char=".">
<col align="right">
<colgroup>
<col align="char" char=".">
<thead>
<tr>
<th scope="col">Item
<th scope="col" align="right">Unit Cost
<th scope="col">Qty.
<th scope="col" align="right">Price
<tfoot>
<tr>
<th id="total_header" colspan=3 align="right">Total
<td headers="total_header">$11.97
<tbody>
<tr><td>Cookies <td>2.49 <td>2 <td>4.98
<tr><td>Soda <td>.99 <td>1 <td>.99
<tr><td>Ice Cream <td>6 <td>1 <td>6.
</table>

#### A speech synthesizer could read this table aloud like:

    Caption: Grocery Bill
    Summary: The total for cookies, soda, and ice cream is $11.97.
    Item: Cookies    Unit Cost: 2.49  Qty.: 2  Price:   4.98
    Item: Soda       Unit Cost:  .99  Qty.: 1  Price:    .99
    Item: Ice Cream  Unit Cost: 6     Qty.: 1  Price:   6.
                                               Total: $11.97

#### Your Web browser renders it like this:

Grocery Bill
Item | Unit Cost | Qty. | Price
--- | --- | --- | ---
Total | $11.97
Cookies | 2.49 | 2 | 4.98
Soda | .99 | 1 | .99
Ice Cream | 6 | 1 | 6.

Related Internet Explorer bug reports: Channel9 Wiki: Internet Explorer Standards Support.

- `abbr` provides an abbreviated form of a cell’s content. Useful for long headers that speech synthesizers may repeat frequently.
- `axis` declares categories for cells. In effect, it provides header information which does not exist as actual headers in the table.

- `span` specifies the number of columns in a `<colgroup>`.
- `width` specifies the width of a column or each column in a `<colgroup>`.

### Example:

Each column in the following table should be the same width except for the first, which should be twice as wide as the others.

<table rules="groups">
<caption>Filtering Features</caption>
<colgroup>
<col width="2*" align="right">
<colgroup span=3 width="*" align="center">
<colgroup span=3 width="*" align="center">
<colgroup span=2 width="*" align="center">
<thead>
<tr>
<th rowspan=2 scope="col" abbr="Browser">Web Browser
<th colspan=3 scope="colgroup" axis="Feature">Cookies
<th colspan=3 scope="colgroup" axis="Feature">Images
<th colspan=2 scope="colgroup" axis="Feature">Pop&#8208;Up Windows
<tr>
<th scope="col">external server
<th scope="col">by domain
<th scope="col">throw away on exit
<th scope="col">external server
<th scope="col">by domain
<th scope="col">by URL
<th scope="col">all
<th scope="col">by domain
<tbody>
<tr><th scope="row">Internet Explorer <td>Yes<td>Yes<td>No <td>No<td>No<td>No <td>No<td>No
<tr><th scope="row">Mozilla <td>Yes<td>Yes<td>Yes <td>Yes<td>Yes<td>No <td>Yes<td>Yes
<tr><th scope="row">Opera <td>Yes<td>Yes<td>Yes <td>No<td>No<td>No <td>Yes<td>No
<tr><th scope="row">iCab <td>No<td>No<td>Yes <td>Yes<td>Yes<td>Yes <td>No<td>No
</table>

#### A speech synthesizer could read this table aloud as:

    Caption: Filtering Features
    Browser: Internet Explorer
    	Cookies:
    		external server: Yes
    		by domain: Yes
    		throw away on exit: No
    	Images:
    		external server: No
    		by domain: No
    		throw away on exit: No
    	Pop‐Up Windows:
    		all: No
    		by domain: No
    Browser: Mozilla
    	Cookies:
    		external server: Yes
    		by domain: Yes
    		throw away on exit: Yes
    	Images:
    		external server: Yes
    		by domain: Yes
    		throw away on exit: No
    	Pop‐Ups:
    		all: Yes
    		by domain: Yes
    Browser: Opera
    	Cookies:
    		external server: Yes
    		by domain: Yes
    		throw away on exit: Yes
    	Images:
    		external server: No
    		by domain: No
    		throw away on exit: No
    	Pop‐Ups:
    		all: Yes
    		by domain: No
    Browser: iCab
    	Cookies:
    		external server: No
    		by domain: No
    		throw away on exit: Yes
    	Images:
    		external server: Yes
    		by domain: Yes
    		throw away on exit: Yes
    	Pop‐Ups:
    		all: No
    		by domain: No

#### Your Web browser renders it like this:

Filtering Features
Web Browser | Cookies | Images | Pop‐Up Windows
--- | --- | --- | ---
external server | by domain | throw away on exit | external server | by domain | by URL | all | by domain
Internet Explorer | Yes | Yes | No | No | No | No | No | No
Mozilla | Yes | Yes | Yes | Yes | Yes | No | Yes | Yes
Opera | Yes | Yes | Yes | No | No | No | Yes | No
iCab | No | No | Yes | Yes | Yes | Yes | No | No

## Your Browser

Your Web browser identified itself as `Wget/1.11.4` when it requested this page.