Colspan y Rowspan

Estos atributos se utilizan para aquellos casos en los que queramos que una celda ocupe más de una columna o más de una fila. Ambos atributos trabajan con un valor numérico sin decimales, el cual es igual al número de filas o columnas que se desea que ocupe la celda. Por lo tanto:

• Colspan: Define el número de columnas que una celda puede ocupar.
• Rowspan: Define el número de filas que una celda puede ocupar.

Nota: Se pueden usar ambos atributos a la vez sin problema alguno.

Tablas y los estilos CSS

En una tabla también es posible incorporar estilos y clases CSS; sin embargo, hacerlo de forma tradicional no es eficiente, ya que al estar constituida por numerosos elementos internos sería necesario definir el estilo o una clase en cada uno. Para simplificar esta tarea existen los elementos "col" y "colgroup", que tienen la función de definir qué elementos tendrán ciertos estilos.

Su forma de uso consiste en el elemento "colgroup" actuando como contenedor del elemento "col". Por otra parte, "col" vincula el estilo a una serie de celdas según la posición que tengan en sus respectivas filas; es decir:

Para la primera celda de las filas se utiliza un "col", para las segundas un segundo "col", y así sucesivamente. Si en algún momento quisiéramos que a alguna serie de celdas no se le aplique un estilo, igualmente es necesario incluir su respectivo elemento "col" pero dejándolo vacío para seguir la correlación de las celdas; de lo contrario, se aplicarían los estilos de otras columnas a estas.

Un ejemplo de esto es:

El resultado de este código es el siguiente:

Nota: Se pueden usar los atributos colspan y rowspan en el elemento "col" perfectamente.

Si se quiere añadir el estilo a varias columnas sería de la siguiente manera:

Nota: "span" también adopta un valor numérico sin decimales.

Nota: Si se diera el caso de querer dejar una celda visualmente vacía, se puede usar el código de símbolo especial " ", que al ser interpretado muestra un espacio en blanco.

Nota: En la actualidad no es recomendable emplear tablas para estructurar la página web. Esta es una vieja práctica que se utilizaba cuando CSS tenía mala compatibilidad con los navegadores; actualmente es contraproducente, ya que se obtiene un código más limpio, contenido más semántico y mejores diseños con la implementación de CSS y contenedores semánticos.

Añadir estructura a las tablas

Dependiendo del contenido, la estructura de nuestras tablas se puede volver más compleja. Para estos casos existen etiquetas con la función específica de definir la estructura de forma clara. La aplicación de estas etiquetas no afecta la accesibilidad, pero ayuda a producir un código más limpio y facilita la aplicación de estilos CSS. Las etiquetas son las siguientes:

• Thead

  Este elemento define la cabecera de la tabla; en otras palabras, alberga todos los encabezados de las columnas, aunque en ocasiones se pudiesen incluir otros elementos decorativos.

  Nota: Si se utilizan los elementos "col" y "colgroup", la cabecera debe ir justo debajo.

• Tbody

  Esta etiqueta define el cuerpo de la tabla, que es el lugar donde se encuentra la mayor parte del contenido. Básicamente, todo lo que no esté en la cabecera o en el pie se encuentra en el cuerpo. En el código, debido a la cantidad de contenido, suele ubicarse después del thead.

  Nota: Aunque los navegadores incluyen el tbody por defecto si no se define, es bueno hacerlo uno mismo para tener mejor control sobre la estructura y los estilos.

• Tfoot

  Este último elemento define el pie de tabla; por ejemplo, la última fila que contiene totales o resúmenes de los datos anteriores. Una característica es que en el código se puede colocar antes que el cuerpo ("tbody") por razones de accesibilidad, aunque visualmente se mostrará siempre al final dentro de "table".

Nota: Un ejemplo de uso de estas etiquetas para aplicar estilos CSS sería definir que la cabecera y el pie de tabla se repitan en cada página impresa, mientras el cuerpo se desplaza con una barra de scroll.

Malas prácticas

• Anidar tablas: Como se ha dicho anteriormente, las tablas pueden contener casi cualquier elemento, incluyendo otras tablas (anidación). Sin embargo, no es una práctica recomendable, ya que produce estructuras difíciles de entender para los usuarios y motores de lectura. Es mejor usar "colspan" y "rowspan" para obtener resultados similares de forma más limpia.

Buenas prácticas

• Usar encabezados de columna y de fila: Ayuda a los usuarios a interpretar mejor los datos, especialmente a quienes usan lectores de pantalla, ya que estos motores pueden vincular la información de las celdas con sus títulos correspondientes.
• Elemento "caption": Como se mencionó antes, incluir un título ayuda al usuario a identificar rápidamente si la información de la tabla le es de utilidad.

• Usar el atributo "scope": Se utiliza en los elementos "th" e indica a los motores de lectura a qué fila o columna pertenece un encabezado. Sus valores son: "col" (columna) y "row" (fila).

  

  También existen "colgroup" y "rowgroup" para casos donde un encabezado abarque un grupo completo de columnas o filas.

• Atributos "id" y encabezados: Una alternativa al "scope" es asignar un "id" único a cada "th" y usar el atributo "headers" en los "td". El atributo "headers" contiene una lista de los IDs de los encabezados que corresponden a esa celda específica.

  

  Nota: Para que este método funcione adecuadamente se necesitan encabezados tanto de columna como de fila claramente definidos.