@alterebro

Uso apropiado de marcado semantico XHTML en Tablas.

jueves, marzo 31, 2005 @16:26

Estructura de una tabla XHTML semanticamente correcta. A tener en cuenta el uso poco frecuente de scope y headers al igual que el uso corercto de los th y el atributo summary.

<!-- HTML -->
<table summary="Este es el resumen de la tabla">
<caption>Lorem Ipsum Dolor Sit Amet</caption>
<thead>
<tr>
<th id="columna-elementos" scope="col">Elementos</th>
<th id="cabecera1" scope="col">Cabecera1</th>
<th id="cabecera2" scope="col">Cabecera2</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Este es el footer</td>
</tr>
</tfoot>
<tbody>
<tr>
<th id="linea1" scope="row">Elemento #1</th>
<td headers="columna-elementos cabecera1">Lorem Ipsum</td>
<td headers="columna-elementos cabecera2">Lorem Ipsum</td>
</tr>
<tr>
<th id="linea2" scope="row">Elemento #2</th>
<td headers="columna-elementos cabecera1">Lorem Ipsum</td>
<td headers="columna-elementos cabecera2">Lorem Ipsum</td>
</tr>
</tbody>
</table>
/* CSS */
/* Elimina espacios y margenes entre las celdas de la tabla. */
table, thead, tbody, tr, td {
padding: 0;
margin: 0;
border: 0;
border-collapse: collapse;
border-spacing: 0;
}

Etiquetas: , ,

0 comentarios

Publicar un comentario en la entrada

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace