Configurar una tabla en HTML

En el último post aprendimos a crear una tabla sencilla en HTML, eligiendo la cantidad de filas y columnas a través de la inserción de cuatro códigos: las etiquetas, <table> <tbody> <td> <tr>. Ahora vamos a ver como cambiar su configuración, añadiendo a las etiquetas algunos atributos. Con las filas y celdas creamos una "rejilla" en la que podemos repartir nuestros contenidos, por ejemplo, insertar varias imágenes de forma ordenada una al lado de la otra, algo que no permite de forma natural el lenguaje HTML. Al configurar una tabla HTML5 con atributos, lo que conseguimos es cambiar su aspecto y propiedades. Así puedes alinear el texto de una línea de forma centrada y el de la siguiente línea justificado en ambos márgenes, o hacer que en una celda las letras sean de un tamaño más grande.

Hay muchos atributos que puedes añadir para configurar una tabla en HTML, así que para que lo aprendas de forma fácil y fluida los vamos a dividir en tres tipos.

* Atributos para configurar el tamaño de la tabla y las celdas. "Width", con este comando puedes definir el número de pixeles que ocupará toda la tabla y cada uno de los espacios. Además también tienes la posibilidad de que el tamaño se ajuste al contenido, o de fijar el ancho de las celdas con un %. Para dar una altura a las celdas existe el atributo "height", pero de normal no se usa, porque hay navegadores que no lo leen y hay que intentar que nuestro blog o página Web sea vea igual desde cualquier ordenador.

* Atributos para fusionar las celdas. "Colspan" y "rowspan". Con estos dos comandos podemos hacer que una celda se expanda para ocupar el espacio de dos o más celdas. Podemos llegar a unir así toda una fila o columna como una única celda. Esto nos permite personalizar al máximo nuestra tabla de HTML y crear todo tipo de espacios.

* Atributos para configurar el aspecto de la tabla: "Background", "bgcolor", "border", "frames", "rules"... Son todos los atributos que definen los marcos de la tabla, y también los que dan color a los fondos. Por defecto los marcos son transparentes y sólo veremos el contenido distribuido en el espacio, aunque también se pueden conseguir marcos invisibles de otras dos formas: dándole al atributo de ancho del borde un valor de cero, o configurando el color del borde igual al del fondo de la página. Además en este apartado también tenemos la posibilidad de añadir efectos de sobras y relieve al marco, formatos que están activos y son compatibles con HTML5.

* Atributos para configurar la alineación de la tabla y los del contenidos. Por defecto tanto la tabla como el contenido los tendremos alineados a la izquierda. Con los comandos "align" puedes situar la tabla centrada o al lado derecho, si por ejemplo estamos creando un blog en árabe. También podemos usar este atributo HTML para alinear el contenido en cada una de las celdas en la horizontal, y "valign" en la vertical.   Otros comandos que entran en este grupo son "cellpading" y "cellspacing". El resultado es conseguir una presentación de la tabla que a nivel visual es más atractiva.

¿Y el formato del texto cómo se configura? Todos los contenidos, desde las imágenes a los textos, tienen sus propias etiquetas y características que son independientes de los atributos de la tabla principal. Por ejemplo: el aspecto del texto (tamaño, color, formato, tipo de letra....) lo tendemos que aplicar directamente sobre los párrafos, como si estuviéramos escribiendo el código de HTML5 fuera de la tabla.

Imagen: en dominio público. Autor: Frits Ahlefeldt