Blog: Diseño web

Jugando con tablas

Publicado el: 4/09/2008 en: Diseño web | 3 comentarios

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:

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: