Tablas

      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.


Estructura 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 A1Celda A2Celda A3
Celda B1Celda B2Celda 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í:

Tabla con bordes
Celda A1Celda A2Celda A3
Celda B1Celda B2Celda 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í:

Tabla con cabeceras
Col 1Col 2Col 3
Fila 1Celda A1Celda A2Celda A3
Fila 2Celda B1Celda B2Celda B3
Fila incompletaCelda C1Celda 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.


Aspecto de una tabla

      En lo que respecta al aspecto general de una tabla podemos cambiar diferentes elementos:

  1. Grosor del borde exterior. Para ello cambiamos el valor del modificador border de la etiqueta table, por ejemplo:
    <table border=5>
    El grosor por defecto cuando únicamente ponemos <table border> es 1.
  2. Anchura y altura de la tabla. Para cambiar las dimensiones de la tabla se utilizan los modificadores width (anchura) y height (altura) en la etiqueta <table>. Estos modificadores se igualan a un porcentaje de la dimensión de la ventana activa o a un número que indica el número de pixels. Por ejemplo:
    <table width=300>
    <table height=50%>
    <table width=50% height=200>
  3. Fondo de la tabla. El fondo de la tabla se puede colorear e incluso podemos colocar en él una imagen.
  4. Separación entre celdas. Se puede conseguir que haya un cierto espacio de separación entre celdas utilizando el modificador cellspacing de la etiqueta <table>. Este modificador se iguala a un número que indica la separación entre las celdas, por ejemplo:
    <table border cellspacing=10>
    En este ejemplo hemos incluido el modificador border pues de lo contrario no se verían los bordes de separación entre las celdas. Por defecto la separación entre las celdas de una tabla es de 2 pixels.
  5. Separación entre el borde de una celda y su contenido. La separación entre el borde de una celda y su contenido es de 1 pixel por defecto. Podemos utilizar el modificador cellpadding de la etiqueta <table>, igualándolo al número de pixels que queremos que haya de separación. Por ejemplo:
    <table border cellpadding=10>
    En este ejemplo también hemos incluido el modificador border pues de lo contrario no se verían los bordes de separación.

      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:

Tabla de aspecto diferente
Celda A1Celda A2Celda A3
Celda B1Celda B2Celda B3

      Con respecto al aspecto de las celdas podemos:

  1. Posición del contenido de la celda. Por defecto el contenido de una celda está centrado, pero podemos moverlo tanto horizontal como verticalmente.
  2. Fusión de celdas.
  3. Fondo de una celda.

Ejemplo práctico.

Copia el siguiente código y guardaló con el nombre prueba4tablas.htm:





El resultado que deberías obtener con este código es este.