Jugando con tablas

La maquetación por tablas ya no es tan popular como lo era hace unos años, algo que ha llevado a más de uno (me incluyo en algunos momentos) a mandar las tablas al ostracismo apelando a la palabra mágica que últimamente rodea a todo lo relacionado con el diseño web:

Artículos recientes

La maquetación por tablas ya no es tan popular como lo era hace unos años, algo que ha llevado a más de uno (me incluyo en algunos momentos) a mandar las tablas al ostracismo apelando a la palabra mágica que últimamente rodea a todo lo relacionado con el diseño web: la Accesibilidad.

Pero quizá, en ese afán de desentendernos de las tablas, llegamos a extremos en los que tratamos de maquetar una tabla sin tablas.

Pues para todos aquellos que les ha pasado algo similar, vamos a repasar como hacer una tabla accesible.

Vamos a analizar las etiquetas que componen la estructura de una tabla y ver qué es cada uno de sus componentes:

  • La etiqueta <table>*: *esta etiqueta define dónde comienza la tabla. Se le debe de añadir el atributo summary="" en el que se describa de forma breve un resumen de la tabla. Además, lo común es darle un atributo id para poder darle estilo a través de CSS como un elemento individual.
  • Etiqueta <caption>: en esta etiqueta se puede poner el título de la tabla.
  • La etiqueta <thead>: etiqueta que define el comienzo de la cabecera de la tabla. Dentro de esta etiqueta se definirá la fila con <tr> como se hace en las tablas habitualmente, pero las celdas se definen como <th> sustituyendo al ya conocido <td>.
  • La anteriormente mencionada etiqueta <th>: esta etiqueta define las celdas que componen la cabecera de nuestra tabla, y como tal, el navegador les dará su peso específico "pintando" el contenido en negrita y centrándolo en la celda. Se debe de acompañar del atributo scope
  • Etiqueta <tbody>: dentro de esta etiqueta estará el cuerpo de nuestra tabla. Se definen las filas y las celdas con las sobradamente conocidas etiquetas <tr> y <td>.
  • Atributo scope="": este atributo se utiliza para vincular la información contenida en las diferentes celdas de una tabla. Se utiliza únicamente con las etiquetas <th> y <td>, y puede tomar un solo de sus valores.
Supone una alternativa simple al atributo `headers`. ¿Esto a efectos prácticos en qué se traduce?, en que para definir inicios de columnas e inicios de fila, se debe de añadir el atributo `scope=""` para hacer la tabla accesible a los lectores de pantalla. Los valores que puede tomar son: 1. row: la celda se refiere al inicio de una fila. 2. col: la celda se refiere al inicio de una columna. 3. rowgroup: la celda se refiere al inicio de un conjunto de filas. 4. colgroup: la celda se refiere al inicio de un conjunto de columnas.

Como ejemplo de todas estas etiquetas, añado el siguiente código de una tabla:

<table summary="Tabla de ejemplo" id="tabla" >  
    <caption>Título de la tabla</caption>  
    <thead>  
       <tr id="cabecera" >  
        <th scope="col">Título de columna 1</th>  
        <th scope="col">Título de columna 2</th>  
        <th scope="col">Título de columna 3</th>  
       </tr>  
    </thead>  
    <tbody>  
       <tr>  
        <td scope="row">1ª celda de fila 1</td>  
        <td>2ª celda de fila 1</td>  
        <td>3ª celda de fila 1</td>  
        </tr>  
        <tr>  
        <td scope="row">1ª celda de fila 2</td>  
        <td>2ª celda de fila 2</td>  
        <td>3ª celda de fila 2</td>  
         </tr>  
         <tr>  
        <td scope="row">1ª celda de fila 3</td>  
        <td>2ª celda de fila 3</td>  
        <td>3ª celda de fila 3</td>  
         </tr>  
         <tr>  
        <td scope="row">1ª celda de fila 4</td>  
        <td>2ª celda de fila 4</td>  
        <td>3ª celda de fila 4</td>  
         </tr>  
    </tbody>  
</table>

Este código pintaría una tabla como la siguiente:

Título de la tabla
Título de columna 1 Título de columna 2 Título de columna 3
1ª celda de fila 1 2ª celda de fila 1 3ª celda de fila 1
1ª celda de fila 2 2ª celda de fila 2 3ª celda de fila 2
1ª celda de fila 3 2ª celda de fila 3 3ª celda de fila 3
1ª celda de fila 4 2ª celda de fila 4 3ª celda de fila 4

A modo de "regalito", un último consejo para que las celdas de las tablas queden contiguas a través de CSS.

Utilizar el atributo border-collapse:collapse; en la id de la tabla para que las celdas se unan.

Un ejemplo:

con border-collapse:collapse
a b c
d e f
sin border-collapse:collapse
a b c
d e f