Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos alojar distintos contenidos. HTML dispone de una gran variedad de etiquetas para crear tablas, con sus atributos.
En un principio nos podría parecer que las tablas son poco útiles y que pueden ser utilizadas principalmente para listar datos como agendas, resultados y otros datos de una forma organizada. En general, sirven para representar información tabulada, en filas y columnas.
Como veremos a continuación, existen diversas etiquetas que se deben utilizar en una forma determinada para la creación de tablas. Si deseamos mostrar datos de una manera sencilla de leer, dispuestos en filas y columnas, tarde o temprano observaremos que las tablas son la mejor solución.
Etiquetas básicas para tablas en HTML
Las tablas son definidas por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas de las tablas, hasta llegar a las celdas. Dentro de las celdas ya es permitido colocar textos e imágenes que darán el contenido a la tabla.
Las tablas son descritas por filas de arriba a abajo (y luego por columnas de izquierda a derecha). Cada una de estas filas es definida por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada fila, habrá diferentes celdas. Cada una de estas celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas etiquetas será donde coloquemos nuestro contenido.
Aquí tenemos un ejemplo de estructura de tabla:
<table>
<tr>
<td>Celda 1, fila 1</td>
<td> Celda 2, feila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2</td>
<td> Celda 2, fila 2</td>
</tr>
</table>
El resultado:
Celda 1, fila 1 | Celda 2, fila 1 |
Celda 1, fila 2 | Celda 2, fila 2 |
La etiqueta <th> sirve para crear una celda cuyo contenido esté formatedo como un título o cabecera de la tabla. En la práctica, lo que hace es poner en negrita y centrado el contenido de esa celda, lo que se puede conseguir aplicando las correspondientes etiquetas dentro de la celda. Así:
<td align=»center»><b>contenido de la celda</b></td>
Atributos para tablas, filas y celdas
En cuanto a atributos para tabla hay unos cuantos. Muchos los conocemos ya de otras etiquetas como width, height, align, etc. Hay otros que son especialmente creados para las etiquetas TABLE.
- cellspacing: es el espacio entre celdas de la tabla.
- cellpadding: es el espacio entre el borde de la celda y su contenido.
- border: es el número de píxeles que tendrá el borde de la tabla.
- bordercolor: es el color RGB que le vamos a asignar al borde de la tabla.
En cuanto a las etiquetas «interiores» de una tabla, nos referimos a TR y TD, hay que tener en cuenta que:
- Podemos usar prácticamente cualquier tipo de etiqueta dentro de la etiqueta <td> para, de esta forma, escribir su contenido.
- Las etiquetas situadas en el interior de la celda no modifican el resto del documento.
- Las etiquetas de fuera de la celda no son tenidas en cuenta por ésta.
Así pues, podemos especificar el formato de nuestras celdas a partir de etiquetas introducidas en su interior o mediante atributos colocados dentro de la etiqueta de celda <td> o bien, en algunos casos, dentro de la etiqueta <tr>, si deseamos que el atributo sea valido para toda la línea. La forma más útil y actual de dar forma a las celdas es a partir de las hojas de estilo en cascada.
Veamos a continuación algunos atributos útiles para la construcción de nuestras tablas. Empecemos viendo atributos que nos permiten modificar una celda en concreto o toda una línea:
align | Justifica el texto de la celda del mismo modo que si fuese el de un párrafo. |
valign | Podemos elegir si queremos que el texto aparezca arriba (top), en el centro (middle) o abajo (bottom) de la celda. |
bgcolor | Da color a la celda o línea elegida. |
bordercolor | Define el color del borde. |
Otros atributos que pueden ser únicamente asignados a una celda y no al conjunto de celdas de una línea son:
background | Nos permite colocar un fondo para la celda a partir de un enlace a una imagen. |
height | Define la altura de la celda en pixels o porcentaje. |
width | Define la anchura de la celda en pixels o porcentaje. |
colspan | Expande una celda horizontalmente. |
rowspan | Expande una celda verticalmente. |
Estos últimos cuatro atributos descritos son de gran utilidad. Concretamente, height y width nos ayudan a definir las dimensiones de nuestras celdas de una forma absoluta (en pixels o puntos de pantalla) o de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla.
A titulo de ejemplo:
<td width=»80″>
Dará una anchura de 80 pixels a la celda. Sin embargo,
<td width=»80%»>
Dará una anchura a la celda del 80% de la anchura de la tabla.
Hay que tener en cuenta que, definidas las dimensiones de las celdas, el navegador va a hacer lo que buenamente pueda para satisfacer al programador. Esto quiere decir que puede que en algunas ocasiones el resultado que obtengamos no sea el esperado. Concretamente, si el texto presenta una palabra excesivamente larga, puede que la anchura de la celda se vea aumentada para mantener la palabra en la misma línea. Por otra parte, si el texto resulta muy largo, la celda aumentara su altura para poder mostrar todo su contenido.
Análogamente, si por ejemplo definimos dos anchuras distintas a celdas de una misma columna, el navegador no sabrá a cual hacer caso. Es por ello que resulta conveniente tener bien claro desde un principio como es la tabla que queremos diseñar. No está de más si la prediseñamos en papel si la complejidad es importante.
Los atributos rowspan y colspan son también utilizados frecuentemente. Gracias a ellos es posible expandir celdas fusionando éstas con sus vecinas. El valor que pueden tomar estas etiquetas es numérico. El número representa la cantidad de celdas fusionadas.
Así,
<td colspan=»2″>
Fusionara la celda en cuestión con su vecina derecha.
Esta celda tiene un colspan=»2″ | |
Celda normal | Otra celda |
Del mismo modo,
<td rowspan=»2″>
Esta celda tiene rowspan=»2″, por eso tiene fusionada la celda de abajo. | Celda Normal |
Otra celda normal |
Expandirá la celda hacia abajo fusionándose con la celda inferior.