| |
|---|
|
|
| |
|---|
|
tablas, filas, columnas, HTML, colspan, rowspan,tr,th,td,caption,border, tfoot, thead, tbody |
Portafolio de temas tratados en esta publicación |
|---|
 |
Generalidades
El concepto TABLA ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML desde sus primeras versiones, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente, así que constituyen esencialmente, una forma fantástica de mostrar datos claramente.
Además, si las construimos de forma semántica y correctamente, es muy sencillo darle estilos desde CSS y cambiar su diseño con unas cuantas propiedades CSS, puesto que mediante las etiquetas que la componen se puede hacer referencia a cada parte de la misma.
Entonces, en HTML, recurrimos a la etiqueta <table>, para poder elaborar tablas. Pero como en el abordaje de cualquier tema, tiene la primacía la necesaria definición del concepto tratado. Así que:
-
<table> … ¿Qué es eso? -
Iniciemos, precisando, con la respuesta a la anterior pregunta. 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.
(Fundamentación)
En Html las tablas sirven no sólo para alinear cifras pero sobre todo para colocar elementos al emplazamiento deseado. El uso de las tablas es muy frecuente.
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).
Puntualizando: las filas quedan definidas por la etiqueta tr, mientras que las columnas quedan definidas por la etiqueta td....¡ABC primario de tablas HTML!!!... recordemos que este tipo de aprendizaje constituye una forma de alfabetización, hacia un nuevo lenguaje, que es el lenguaje de marcado. Por apreciaciones de este estilo, esta lección es nivel principiante, porque ubica y puntualiza los elementos teóricos básicos, para una mejor y mayor fundamentación posterior.
En el diseño de una tabla se recurre al uso de otras etiquetas, las cuales carecen de sentido sino están situadas dentro de una etiqueta de tabla.
⏫ Ir al inicio del post ⏫
Anatomía de una tabla básica y sencilla de 2x2.
Iniciemos el trabajo de crear una tabla básica con HTML, siguiendo la metodología de ir paso a paso en el dominio de los conceptos de este tema, tal como debe ser al nivel que se enfoca esta lección que es precisamente el nivel principiante; pero eso sí, sin descuidar el debido abordaje en profundidad a los conceptos señalados: sencillez y profundidad se combinan ene este post.
Las tablas más sencillas de HTML se definen con tres etiquetas, considerados los tres elementos primarios
para iniciarse en el tema, y que por tanto requiere su adecuada comprensión y empleo:
Primeramente la etiqueta
<table>para crear la tabla, y que precisamente define la tabla. Encierra esta etiqueta todas las filas y columnas de la tablasigue, la etiqueta
<tr>(del inglés "table row") definen cada fila de la tabla y encierran todas las columnas.por último, encontramos las columnas dentro de la fila, con las cuales se puede utilizar una etiqueta
<th>(del inglés "table header") o<td>, (del inglés "table data cell"), dependiendo de que sea una casilla de cabecera o normal. Vale aclarar que realmente HTML no define columnas sino casillas o celdas de datos.
Respecto a esta última etiqueta, <th> y <td> se utilizarían para cada uno de los campos de la tabla; por un lado, la etiqueta <td>, se refiere específicamente a cada una de las celdas de la tabla. Por su parte, la etiqueta <th> se refiere específicamente a cada una de las celdas de cabecera de la tabla.
Cada vez que se quisiera añadir una nueva fila, habría que incluirlo todo dentro de una etiqueta <tr> .
De forma predeterminada, el texto de los <th> elementos está en negrita y está centrado.
De forma predeterminada, el texto de los <td> elementos es regular y está alineado a la izquierda.
Nota: Los <td> elementos son los contenedores de datos de la tabla. Pueden contener todo tipo de elementos HTML; texto, imágenes, listas, otras tablas, etc.
Estas tres etiquetas serían las etiquetas necesarias para crear una tabla.
Es momento de sugerir la conveniencia de la definición de una tabla básica en condición de ejemplo conceptual gráfico, que podría ser la construcción de una tabla de dos filas por dos columnas, y que además, haga referencia por decir algo, por ejemplo a capitales. Aunque en versiones anteriores de HTML, se pueden aplicar varios atributos a la etiqueta <table>, actualmente solo está permitido uno, el atributo border, al cual se le puede dar un valor de 0 o 1
De esta forma se visualiza un borde en la tabla, este atributo solo se ha de utilizar cuando se está realizando el documento web por motivos de visualización del diseño, siendo conveniente quitar el mismo cuando se publique el documento y establecer los formatos de la tabla mediante hojas de estilo.
Para los ejemplos utilizados y con el fin de poder apreciar el resultado en el navegador se ha establecido el atributo border con un valor de 1
Si se visualiza el código anterior en cualquier navegador, se obtiene una tabla como la que muestra la siguiente imagen:.
Puedes ver claramente en el ejemplo anterior, el concepto de filas conteniendo columnas del que hablamos previamente. Aquí se hace evidente como las celdas, siguen una secuencia en la representación que va de izquierda a derecha, una fila por vez, y esto en función a una numeración de acuerdo a su apariciónen el código y que lo dejo ver en el ítem siguiente. Esto tendrá implicaciones futuras, especialmente cuando se trate el tema de unificación de celdas y agrupamiento.
Sobre las celdas de encabezado:
Profundizando un tantito más en el desarrollo de los conceptos estudiados en esta lección, señalemos que 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 ejemplo de las capitales, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes, en ese caso Venezuela y Argentina, o sea, cada celda de encabezado en la tabla, provee información para el resto de las celdas en la columna a la que pertenece (por supuesto en tablas menos básicas como la del ejemplo, donde aparecen más elementos). Esto da destacamiento a esas celdas.
Nota: Otro pasito más. Sucede que con el mismo HTML también es posible modificar el parámetro “border” para hacerlo más visible. Acá el mismo ejemplo, pero modificado con un valor 5 y además, asignándole color azul; siendo el código resultante el siguiente:
En tu navegador se verá de la forma siguiente:
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas <tr> aparecen antes que las etiquetas <td> lo cual se pudo corroborar en el ejemplo precedente.
Se ha de observar que para cada una de las filas de la tabla, se utiliza la etiqueta <tr>, y como contenido de las mismas, se utilizan etiquetas <th> o <td>, dependiendo de que se quiera establecer celdas de encabezado o normales. Las celdas o casillas de encabezado se visualizan con una fuente fuerte a diferencia de las normales.
Para definir el título de tabla se ha utilizado la etiqueta <caption> y podría ser catalogado como una quinta etiqueta básica, porque es natural que cualquier tabla sea identificada con un correspondiente título informativo de su utilidad para el lector. Recordemos que se insertó de la forma siguiente: <caption>(Titulo de la tabla) Capitales </caption>
Es importante definir bordes tanto para nuestra tabla HTML como para las celdas de la tabla, para lo cual se usa el atributo border, tal como se comprueba en el ejemplo básico de las capitales, insertado de la forma siguiente: <table border="1">
Resumiendo conceptos:
| Etiqueta | Denominación | significado |
|
<TR> |
TABLE ROW. |
FIN DE TABLA |
|
<TH> |
TABLE HEADER. |
ENCABEZADO DE TABLA |
|
<TD> |
TABLE DIVISIÓN. |
DIVISIÓN DE TABLA |
☛ Nota importante ☚
Es necesario que tomes en cuenta que todas las tablas estudiadas en esta lección, no se le han aplicado estilos mediante CSS que son los que permiten mejorar su comprensión y legibilidad, lo cual dejo para una publicación posterior donde lo pueda exponer con el nivel de detalle que se merece.
Es importante aclarar que no se pueden esperar resultados estéticos en tablas sin atributos presentacionales asignados mediante CSS, por eso, aclaro que esta lección es primariamente para comprender la anatomía de tablas en HTML para avanzar luego a su mejoramiento con CSS, que es como actualmente se trabaja; pero, como todo aprendizaje humano, ... primero aprendes a gatear y luego a caminar hasta que puedas llegar incluso al nivel de atleta olímpico.
