Tables (§11)

Row and column groups

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

Related Mozilla bug reports: Table-Rules.

Related Konqueror bug reports: #47412.

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

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo

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.

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)

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.

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 YesYesNo NoNoNo NoNo
Mozilla YesYesYes YesYesNo YesYes
Opera YesYesYes NoNoNo YesNo
iCab NoNoYes YesYesYes NoNo