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:
{
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=”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.
