Las tablas permiten organizar la presentación de la información de una forma útil y sencilla. Vamos a ver cual es la estructura de una tabla y cómo podemos cambiar el aspecto de una tabla.
La etiqueta que marca la construcción de una tabla es <table></table>. Entre ellas será preciso ir definiendo las filas de la tabla (table rows), lo que se hace con la etiqueta <tr></tr> y, a su vez, dentro de cada fila de la tabla se va indicando cada celda con la etiqueta <td></td>. Como es obvio en una tabla se pueden poner tantas filas como sea necesario y, dentro de ellas, tantas celdas como se precisen.
Vamos a escribir el código para una tabla de dos filas (A y B) y tres columnas (1, 2 y 3), y dentro de cada celda escribiremos su posición (desde A1 hasta B3):
<table> <tr> <!-- aqui se define la primera fila --> <td>Celda A1</td><td>Celda A2</td><td>Celda A3</td> </tr> <tr> <!-- aqui se define la segunda fila --> <td>Celda B1</td><td>Celda B2</td><td>Celda B3</td> </tr> </table>
Esta tabla aparece así:
Celda A1 | Celda A2 | Celda A3 |
Celda B1 | Celda B2 | Celda B3 |
Como se puede ver no son visibles los bordes de la tabla, lo que puede ser útil en determinadas ocasiones. Si queremos que aparezcan los bordes es necesario utilizar un modificador de la etiqueta <table>, que es <table border>. Así, vamos a volver a escribir todo el código con esta modificación para que se vean los bordes de la tabla.
También es posible poner título (caption) a la tabla. Este título aparecerá encima de la tabla. Para esto se utiliza la etiqueta <caption></caption>, escribiendo entre ellas el título que se le quiere dar a la tabla.
Además, vamos a hacer que la tabla aparezca centrada en la ventana activa. Para esto utilizamos la etiqueta <center></center>, que ya conocemos. Será necesario anidar la tabla dentro de las etiquetas de centrado.
El código con todas estas innovaciones queda:
<center> <table border> <!-- hemos indicado que queremos ver los bordes de la tabla --> <caption>Tabla con bordes</caption> <tr> <!-- aqui se define la primera fila --> <td>Celda A1</td><td>Celda A2</td><td>Celda A3</td> </tr> <tr> <!-- aqui se define la segunda fila --> <td>Celda B1</td><td>Celda B2</td><td>Celda B3</td> </tr> </table> </center>
Ahora la tabla aparece así:
Celda A1 | Celda A2 | Celda A3 |
Celda B1 | Celda B2 | Celda B3 |
Vamos a ver dos últimos detalles sobre la estructua de una tabla. En primer lugar, en caso de necesitarlo podemos utilizar celdas de cabecera (header) para poner título a una fila o columna. En estas celdas el texto aparece centrado y destacado en negrita. La etiqueta que marca una celda de cabecera es <th></th>, y se escribirá en el sitio de la tabla que se precise sustituyendo a la etiqueta <td></td>.
En segundo lugar hay que aclarar que no es necesario que en una tabla todas las filas tengan el mismo número de celdas. Si una celda no debe aparecer basta con no ponerla. En su lugar aparecerá un hueco.
Vamos a escribir una tabla con tres filas y tres columna, en la que la tercera fila no tiene la última celda. Vamos poner título a la tabla y cabeceras a las filas y columnas. También vamos a hacer que la tabla aparezca centrada en la ventana activa.
<center> <table border> <caption>Tabla con cabeceras</caption> <tr> <th></th><th>Col 1</th><th>Col 2</th><th>Col 3</th> </tr> <tr> <th>Fila 1</th><td>Celda A1</td><td>Celda A2</td><td>Celda A3</td> </tr> <tr> <th>Fila 2</th><td>Celda B1</td><td>Celda B2</td><td>Celda B3</td> </tr> <tr> <th>Fila incompleta</th><td>Celda C1</td><td>Celda C2</td> </tr> </table> </center>
Ahora la tabla aparece así:
Col 1 | Col 2 | Col 3 | |
---|---|---|---|
Fila 1 | Celda A1 | Celda A2 | Celda A3 |
Fila 2 | Celda B1 | Celda B2 | Celda B3 |
Fila incompleta | Celda C1 | Celda C2 |
Como se puede ver, en caso de no necesitar una celda interna de la tabla (en el ejemplo pasa con la primera celda, esquina superior izquierda) basta con declararla pero sin escribir nada dentro.
En lo que respecta al aspecto general de una tabla podemos cambiar diferentes elementos:
Vamos a ver el código de una tabla centrada en la ventana activa, que tiene por título "Tabla de aspecto diferente", con dos filas y tres columnas, con un borde exterior de 5 pixels, con un espaciado entre celdas de 10 pixels, con un espaciado entre bordes y contenidos de15 pixels y con un fondo de color
<center> <table border=5 cellspacing=10 cellpadding=15 bgcolor="#FFA23B"> <caption>Tabla de aspecto diferente</caption> <tr> <td>Celda A1></td><td>Celda A2</td><td>Celda A3</td> </tr> <tr> <td>Celda B1></td><td>Celda B2</td><td>Celda B3</td> </tr> </table> </center>
Esta tabla tiene el siguiente aspecto:
Celda A1 | Celda A2 | Celda A3 |
Celda B1 | Celda B2 | Celda B3 |
Con respecto al aspecto de las celdas podemos:
Copia el siguiente código y guardaló con el nombre prueba4tablas.htm:
El resultado que deberías obtener con este código es este.