¿PARA QUÉ SIRVEN LAS ETIQUETAS? Y ¿CÓMO SE INSERTA UNA TABLA EN UN DOCUMENTO HTML?
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro con un ejemplo:
Ten en cuenta que a esta tabla se le han aplicado estilos mediante CSS para mejorar su comprensión y legibilidad. No se deberían esperar estos resultados en tablas sin atributos presentaciones asignados.
Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos previamente. Aquí se hace evidente como las celdas, que han sido numeradas de acuerdo a su aparición en el código, siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.
CELDAS DE ENCABEZADO
Ahora que ya hemos tratado la estructura básica de una tabla, es hora de comenzar a crear tablas más útiles.
Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Dicho esto, es diícil imaginar una tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado bien ubicado.
En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.
Es fácil ver aquí cómo cada celda de encabezado en la tabla, provee información para el resto de las celdas en la columna a la que pertenece. Algunos agentes, como los navegadores de voz, hacen el mismo análisis cuando deben informar al usuario qué celda de encabezado está asociada a una celda en particular. Pero en algunos casos, las ambigüedades necesitan ser evitadas y es por este motivo que HTML provee algunos atributos como scope.
EL ATRIBUTO SCOPE
El atributo scope provee un mecanismo para indicar explícitamente a qué celdas afecta una celda de encabezado. Este atributo solo puede ser declarado en una celda de encabezado y tomar los valores "col", "row", "colgroup" y "rowgroup". Los valores "col" y "row" indican que la celda de encabezado provee información para el resto de las celdas en la columna o fila (respectivamente) en que está presente. Los otros dos valores tendrán sentido más adelante en este tutorial.
En el siguiente ejemplo, la tabla presentada anteriormente ha sido mejorada con más celdas de encabezado, con el fin de aumentar la legibilidad. Aquí, la celda en la esquina superior izquierda de la tabla, proveería información ambigua si el atributo scope no estuviera presente. En otras palabras, afectaría a las celdas en su columna, así como a las celdas en su fila. La presencia del atributo scope ha dejado en claro que las celdas afectadas por este encabezado son aquellas en la misma fila.
VIDEO PARA MEJOR COMPRENSIÓN DEL TEMA:
