A fin de realizar asociaciones eficientes con datos
tabulados identificaremos una tabla en un documento HTML, según las
recomendaciones oficiales de este lenguaje. En
ocasiones, por desconocer las etiquetas para dar mayor sentido semántico a una
tabla, son omitidas por navegadores web cuando
indexan la información, además, cuando un lector de pantalla las explica a un
usuario entendería escasamente la información. Debido a ello, aplicaremos
atributos, como colgroup y caption, a una tabla.
Cuando creamos una página web e ingresamos diferentes tablas sin
identificación, es complicado aplicar el estilo a cada una por separado, a fin
de lograr un diseño pulcro. El código mostrado en la siguiente imagen, solo
tiene un encabezado con la especificación de horarios, sin otra identificación
adicional. Por lo tanto, es difícil determinar de qué o de quiénes son los
horarios. Ambos casos son confusos en términos semánticos, tanto para el
navegador web, como para el usuario o
el programador, cuando en el futuro se desee realizar modificaciones.
061-01_0907_ilu01. Visualización de tablas
sin título
Para dar nombre a las tablas:
- Ubicamos el
inicio de la etiqueta table.
- Agregamos,
al lado, la apertura de la etiqueta caption,
cuyo significado en español es subtítulo.
- Especificamos
el nombre de la tabla.
- Creamos el
cierre de la etiqueta caption.
Repetimos el procedimiento con la segunda
tabla y, mediante la vista del usuario, apreciamos en la siguiente imagen cómo
se muestran ambas. Cada una tiene su identificación en la parte de arriba con
un espaciado mínimo, a fin de realizar la asociación de forma correcta.
061-01_0907_ilu02. Creación de tablas con
título
Es posible identifcar las tablas
con más detalles a través del uso de la etiqueta colgroup, con ella agrupamos de forma semántica todas las columnas.
Existen diversas formas de utilizarla; en el siguiente ejemplo, la agregamos
inmediatamente luego de la etiqueta caption,
y precedida por la etiqueta col, a
fin de omitir el cierre. La etiqueta col,
en esta oportunidad, representa la primera columna de la tabla, por lo cual, para
observar la agrupación, en el interior de ella agregamos una especificación de
estilo lineal, con fondo de color azul.
061-01_0907_ilu03. Especificación de la etiqueta colgroup
La etiqueta col tiene gran importancia semánticamente, y cuando deseamos
englobar con ella más de una columna, es necesario adicionar todas las
etiquetas correspondientes; de esta forma, el código se vuelve extenso. Por tal
razón, utilizaremos el atributo span
y, como valor, el número de las columnas a agrupar. En la vista del usuario siguiente
verificamos cómo las tres primeras columnas cambiaron de color. Es necesario
tomar en cuenta la forma del conteo, el cual siempre se realiza de izquierda a
derecha.
061-01_0907_ilu04. Ejemplo con atributo span
Keynotes
- Para dar nombre a las tablas: Ubicamos el
inicio de la etiqueta table.
Agregamos, al lado, la apertura de la etiqueta caption, cuyo significado en español es subtítulo. Luego, especificamos
el nombre de la tabla. Y por último, creamos el cierre de la etiqueta caption.
- Es posible identificar las tablas con más
detalles a través del uso de la etiqueta colgroup,
mediante la cual agrupamos de forma semántica todas las columnas.
- La etiqueta col tiene gran importancia semánticamente, y cuando deseamos
englobar con ella más de una columna, es necesario adicionar todas las
etiquetas correspondientes; de esta forma, el código se vuelve extenso. Por tal
razón, utilizaremos el atributo span
y, como valor, el número de las columnas a agrupar.
Reto
Escribe tu opinión sobre la importancia de
controlar asociaciones, cuando se trabaja con datos tabulados. Agrega el
proceso necesario para la identificación de una tabla en un documento HTML,
según las recomendaciones oficiales de este lenguaje.
¡Comparte el resultado final en tu vBox e invita a tus compañeros a debatir
sobre tu opinión!
Tiempo disponible: entre 15 y 30 minutos.
CierreA través de la identificación de una tabla
documento HTML, implementamos valor semántico a la misma, con la finalidad de
ser comprendida por usuarios con discapacidad visual, y cualquier otro
programador. Además, controlamos algunas asociaciones posibles, cuando se
trabaja con datos tabulados. Con paciencia y organización, identificaremos
eficientemente una tabla.
