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: 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>

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