PDF de programación - Páginas WEB Accesibles - Guideline 5. Create tables that transform gracefully

Páginas WEB Accesibles

Guideline 5. Create tables that transform gracefully

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Programación

Universidad Complutense de Madrid

19 de diciembre de 2005

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Checkpoint

5.1 For data tables, identify row and column headers. [Prioridad 1]

5.2 For data tables that have two or more logical levels of row or

column headers, use markup to associate data cells and
header cells. [Prioridad 1]

5.3 Do not use tables for layout unless the table makes sense

when linearized. Otherwise, if the table does not make sense,
provide an alternative equivalent (which may be a linearized
version). [Prioridad 2]

5.4 If a table is used for layout, do not use any structural markup

for the purpose of visual formatting. [Prioridad 2]

5.5 Provide summaries for tables. [Prioridad 3]

5.6 Provide abbreviations for header labels. [Prioridad 3]

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Identificando cabeceras

< table >

< thead >

< tr > < td > </ td >

< th id = " prNinyo " > Niños </ th >
< th id = " p r A d u l t o " > Adulto </ th >
< th id = " pr3Edad " >3 a edad </ th >

</ tr >

</ thead >
< tbody >

< tr >

< th id = " prPaseo " scope = " row " > Paseo </ th >
< td headers = " prPaseo prNinyo " > 0 ,00 </ td >
< td headers = " prPaseo p r A d u l t o " > 6 ,00 </ td >
< td headers = " prPaseo pr3Edad " > 3 ,00 </ td >

</ tr >
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

</ tbody >

</ table >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tabla multidimensional I

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tabla multidimensional II

< TABLE border = " 1 " >

< CAPTION > Travel Expense Report </ CAPTION >
< TR >

< TH > </ TH >
< TH id = " header2 " axis = " e x p e n s e s " > Meals
< TH id = " header3 " axis = " e x p e n s e s " > Hotels
< TH id = " header4 " axis = " e x p e n s e s " > T r a n s p o r t
< TD > s u b t o t a l s </ TD >

< TH id = " header6 " axis = " l o c a t i o n " > San Jose
< TH > < TH > < TH > < TD >

< TD id = " header7 " axis = " date " > 25 - Aug -97
< TD headers = " header6 header7 header2 " > 37.74
< TD headers = " header6 header7 header3 " > 112.00
< TD headers = " header6 header7 header4 " > 45.00
< TD >

< TR >

< TR >

< TR >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tabla multidimensional III

< TD id = " header8 " axis = " date " > 26 - Aug -97

< TD headers = " header6 header8 header2 " > 27.28
< TD headers = " header6 header8 header3 " > 112.00
< TD headers = " header6 header8 header4 " > 45.00
< TD >

< TR >

< TR >

< TR >

< TD > s u b t o t a l s
< TD > 65.02
< TD > 224.00
< TD > 90.00
< TD > 379.02

< TH id = " h e a d e r 1 0 " axis = " l o c a t i o n " > Seattle
< TH > < TH > < TH > < TD >

< TD id = " h e a d e r 1 1 " axis = " date " > 27 - Aug -97
< TD headers = " h e a d e r 1 0 h e a d e r 1 1 header2 " > 96.25
< TD headers = " h e a d e r 1 0 h e a d e r 1 1 header3 " > 109.00
< TD headers = " h e a d e r 1 0 h e a d e r 1 1 header4 " > 36.00
< TD >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tabla multidimensional IV

< TR >

< TR >

< TR >

< TD id = " h e a d e r 1 2 " axis = " date " > 28 - Aug -97
< TD headers = " h e a d e r 1 0 h e a d e r 1 2 header2 " > 35.00
< TD headers = " h e a d e r 1 0 h e a d e r 1 2 header3 " > 109.00
< TD headers = " h e a d e r 1 0 h e a d e r 1 2 header4 " > 36.00
< TD >

< TD > s u b t o t a l s
< TD > 131.25
< TD > 218.00
< TD > 72.00
< TD > 421.25

< TH > Totals
< TD > 196.27
< TD > 442.00
< TD > 162.00
< TD > 800.27

</ TABLE >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tablas para disposición I

< table border = " 0 " >

< tbody >

< tr >

<! -- one of ( TD TH ) -- >
< td width = " 400 " valign = " top " >

Hay i n d i c i o s que indican que < br >
con Elena sea i n t e l i g e n t e < br >
tener p a c i e n c i a

</ td >
< td width = " 400 " valign = " top " >

A c o s t a r s e t e m p r a n o todos los días con < br >
es bueno para la salud

</ td >

</ tr >

</ tbody >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Tablas para disposición II

hay indicios que indican que
con Elena sea inteligente
tener paciencia

acostarse temprano todos los días
es bueno para la salud

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles