Tables [Robin’s HTML 4.0 Conformance Test]

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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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
Web Browser	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‐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
Web Browser	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

Tables (§11)

Row and column groups

Example:

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

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

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

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

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

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

Example:

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

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

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

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

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

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

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

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

Alignment and style

Example:

The decimal points should be lined up like this:

Your Web browser renders it like this:

Example:

It should be rendered similar to this:

Your Web browser renders it like this:

Accessibility for nonvisual Web browsers (§11.4)

Example:

A speech synthesizer could read this table aloud like:

Your Web browser renders it like this:

Example:

A speech synthesizer could read this table aloud as:

Your Web browser renders it like this:

Your Browser

Tables (§11)

Row and column groups

Example:

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

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

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

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

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

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

Example:

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

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

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

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

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

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

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

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

Alignment and style

Example:

The decimal points should be lined up like this:

Your Web browser renders it like this:

Example:

It should be rendered similar to this:

Your Web browser renders it like this:

Accessibility for nonvisual Web browsers (§11.4)

Example:

A speech synthesizer could read this table aloud like:

Your Web browser renders it like this:

Example:

A speech synthesizer could read this table aloud as:

Your Web browser renders it like this:

Your Browser

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

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

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

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

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

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

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

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

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

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

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

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

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