Usable tables in HTML, VXML

4.2.2008 - Pavel Růžička [MCPD]Product Development Department

Usable Tables


2

Define headers of rows and columns

The T H element defines a cell that contains header information

Correct using ofT H elements causes, that table can be easily readed by the rows and by the columns

<thead> <tr> <td> </td> <th>Leden</th> <th>Únor</th> <th>Březen</th> </tr></thead>

<tbody> <tr> <th>Jablka</th> <td>100</td> <td>125</td> <td>80</td> </tr></tbody>


3

Scope of header cell • use attributte s c o p e with row or col value• it specifies the set of data cells for which the current header cell

provides header information

<thead> <tr> <td> </td> <th scope="col">Leden</th> <th scope="col">Únor</th> <th scope="col">Březen</th> </tr></thead>

<tbody> <tr> <th scope="row">Jablka</th> <td>100</td> <td>125</td> <td>80</td> </tr></tbody>


4

Summary of table

Use attribute summary

This attribute provides a summary of the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.

<table summary="Přehled cen jablek, hrušek a švestek za 1.Q roku">


5

a b b r attribute should be used to provide an abbreviated form of the cell's content

<tr> <th scope="row" abbr="Množství jablek">Jablka</th> <td>100</td> <td>125</td> <td>80</td></tr>

may be rendered by user agents when appropriate in place of the cell's content

names should be short since user agents may render them repeatedly

speech synthesizers may render the abbreviated headers relating to a particular cell before rendering that cell's content.


6

Don’t use tables for layout!

Tables should be used only for structured data – not for layout!

Don’t use headers if you do it!

Use <div> elements and CSS for layout rather using tables


7

Complicated nested tables

• http://www.w3.org/WAI/wcag-curric/sam45-0.htm

http://www.w3.org/WAI/wcag-curric/sam45-0.htm









8

Table in audio applications

Technology

Usable tables in HTML, VXML