HTML, las tablas

Cuando veas un sitio con todo el contenido ordenado y alineado, significa que detrás hay una estructura que permite hacer eso, y la estructura está representada por las tablas.

Los «gurús» de la nueva informática tienden a dar orden y linealidad a un sitio web recurriendo a las «Hojas de Estilo», porque así lo quiere el W3C… Mencionaremos las «Hojas de Estilo» más adelante, pero sostengo que el orden que las tablas aportan a un documento web es inigualable. Bien, ahora que saben que las tablas son la base de la estructura de una página web, vamos a hacernos amigos de ellas, ¿de acuerdo?

Comencemos diciendo que las unidades de medida utilizadas para las tablas son dos, es decir,píxeles y los porcentajes. Utilizando la medida en píxeles, la tabla será del tipo fija, es decir, independientemente de la resolución de pantalla que utilicen sus usuarios, la tabla se mostrará siempre con las mismas medidas. Si en cambio utilizan una medida en porcentaje, la tabla se convertirá del tipo fluida, es decir, se adaptará automáticamente a la resolución de pantalla de sus usuarios. Aquí tienen un ejemplo para entender mejor este concepto.

Supongamos que crean una tabla de 400 px. Sus usuarios verán en pantalla siempre 400 px, independientemente de la resolución que utilicen. Si en cambio crean una tabla del 80% esta ocupará el 80% de la pantalla de sus usuarios… siempre y bajo cualquier circunstancia.

Así que diremos en resumen que existen dos tipos de tablas, fija e fluida que se distinguen por la unidad de medida utilizada para su creación. En conclusión, podemos decir tranquilamente que las tablas regulan el Layout de una página web, es decir, la representación gráfica en pantalla.

Tras haber visto qué son las tablas y para qué sirven, comencemos a crear una. Digamos enseguida que las tablas se pueden dividir en filas e y columnas, y la unión de esta división constituye las celdas de la tabla. ¡Una tabla debe contener al menos una fila para poder ser válida! Veamos entonces algunos ejemplos para entender mejor lo dicho anteriormente:

Bueno, hecha esta importante premisa, pasemos a crear una tabla de 400 píxeles con una fila. Para crear una tabla se utiliza la etiqueta tablejunto con otros parámetros que regulan el aspecto de la tabla. Aquí está nuestra tabla con estos parámetros que comentaremos más adelante:

En este ejemplo hemos establecido el borde de la tabla a 1px a través del atributo border así como hemos fijado la longitud a 400px a través del atributo width. En este ejemplo realizado, no hemos insertado filas, pero si es cierto que una tabla para ser válida debe tener al menos una fila…insertémosla ahora.

Mediante el uso de tr hemos insertado una fila en nuestra tabla. Se puede observar que con la sola inserción de tr, aunque sea válido, en la pantalla no se mostrará nada. Se necesita el tercer elemento base para la creación de una tabla y el elemento es td que crea una celda en la tabla. Aquí están los tres elementos base para una tabla, es decir table, tr y td.

Recapitulando, hemos creado una tabla de 400px de largo, con un borde de 1px, formada por una fila y una celda. Aquí está nuestra tabla:

En las próximas lecciones veremos cómo añadir celdas, unir celdas y muchos otros elementos de las tablas.

Pubblicato in HTML & CSS