WebProgramacion > Blog > Accesibilidad Web > Tablas con capas

Desde un punto de vista de accesibilidad web, las tablas sólo deben ser utilizadas para presentar datos. Si queremos maquetar el contenido de nuestra web en forma de tabla, debemos utilizar capas y estilos CSS.

En este ejemplo vamos a ver como implementar una tabla con capas.

La idea general será tener una capa que hará las veces de tabla, con una serie de capas interiores que irán representando a las filas y columnas.

Vamos a utilizar los siguientes estilos:

.tabla
{
   clear: none;
   overflow: auto;
}

.fila
{
   clear: both;
}

.columna
{
   float: left;
   padding: 5px;
   border-style: solid;
   border-right-width: 0px;
   border-left-width: 0px;
   border-top-width: 0px;
   border-bottom-width: 1px;
}


y el código HTML con capas quedaría de la siguiente forma:

<div class="tabla">
    <div class="fila">
        <div class="columna">Nombre</div>
        <div class="columna">Apellidos</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 1</div>
        <div class="columna">Apellidos de ejemplo 1</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 2</div>
        <div class="columna">Apellidos de ejemplo 2</div>
    </div>
    <div class="fila">
        <div class="columna">Nombre de ejemplo 2</div>
        <div class="columna">Apellidos de ejemplo 2</div>
    </div>
</div>

En este ejemplo podremos ver una tabla de tres filas y dos columnas. Si queremos que la cabecera de la tabla tenga un estilo diferente, podemos crear otro estilo y aplicarselo sólamente a la primera fila.

Página web

Podría interesarte...

Tablas accesibles en HTML
Ejemplo de tabla HTML para almacenar datos de manera accesible
Imágenes accesibles en HTML
Código html que hay que utilizar para que una imagen sea accesible
Campos de texto accesibles
Ejemplo de campo de texto accesible con ASP.NET

Fecha

20/4/2012