Aún siendo una de las deficiencias mas comunes en el diseño web en lo que a la accesibilidad se refiere, existen todavía profesionales empeñados en seguir maquetando sus páginas mediante tablas.
En general, no se permite su uso para maquetar a menos que cuando se alinea una tabla, los contenidos de las celdas se convierten en series de párrafos (es decir, de arriba hacia abajo) uno tras otro. Las celdas deben tener sentido cuando se leen en orden horizontal y deben incluir elementos estructurales (que creen párrafos, encabezamientos, listas, etc.) de modo que la página tenga sentido al ser alineada (p.e cuando el usuario desabilite el uso de tablas en su navegador). ver mas aquí.
En realidad, transformar una maquetación realizada con tablas a capas no es tan complicado. Básicamente se trata de jugar con los estilos CSS «float» y «clear», y una vez entendido nos puede resultar incluso más cómodo e intuitivo que hacerlo mediante tablas.
Float: Sirve para alinear un elemento, haciendo que los elementos que le rodean se alineen con respecto a él. Sus posibles valores son «left» (para alinear el elemento a la izquierda) y «right» (para alinearlo a la derecha).Un elemento con “float” debe tener definida su anchura.
Clear: Se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante «float») dejen de alinearse junto a él. Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado)
Vamos a comenzar con un ejemplo sencillo. Dos columnas.
<table>
<tr>
<td style=»width:40%»>Columna Izquierda</td>
<td style=»width:60%»>Columna Derecha</td>
</tr>
</table>
La transformación es muy sencilla y se va a repetir básicamente en todos los casos:
- Las etiquetas <table> y </table> las sustituremos por <div> y </div>.
- La etiqueta <tr> será eliminada
- Las etiquetas <td> y </td> serán sustituidas por un <div> flotante alineado a la izquierda: <div style=»float:left; width:xxx;»> y </div>
- La etiqueta </tr> será sustituida por un <div> que no permitirá flotantes a ningún lado: <div style=»clear:both; padding:0px; margin:0px;»></div>
Este sería el ejemplo completo:
<div>
<div style=»float:left; width:40%;»>Columna Izquierda</div>
<div style=»float:left; width:60%;»>Columna Derecha</div>
<div style=»clear:both; padding:0px; margin:0px;»></div>
</div>
En este otro ejemplo mostramos una página con cabecera, tres columnas y pie de página.
<table>
<!– Cabecera de Página –>
<tr>
<td colspan=»3″></td>
</tr>
<!– Cuerpo a 3 columnas –>
<tr>
<td>Izquierda</td>
<td>Centro</td>
<td>Derecha</td>
</tr>
<!– Pie de Página –>
<tr>
<td colspan=»3″></td>
</tr>
</table>
La transformación a capas …
<div>
<!– Cabecera de Página –>
<div>Cabecera</div>
<div style=»clear:both; padding:0px; margin:0px;»></div>
<!– Cuerpo a 3 columnas –>
<div style=»float:left; width:33%;»>Izquierda</div>
<div style=»float:left; width:33%;»>Centro</div>
<div style=»float:left; width:33%;»>Derecha</div>
<div style=»clear:both; padding:0px; margin:0px;»></div>
<!– Pie de Página –>
<div>Pie de Página</div>
<div style=»clear:both; padding:0px; margin:0px;»></div>
</div>
En este caso, nos ahorramos incluso la necesidad de añadir el atributo colspan de la celda que conforma la cabecera y el pie de página.
Los estilos han sido definidos en línea para que quede más claro. En vuestra mano está definirlos en un CSS externo mucho mas elegante.
