Estructura de una tabla

Las tablas son muy usadas en el diseño de las páginas Web, aparecieron en la versión HTML 3.0. Las tablas son una de las etiquetas más útiles que podemos encontrar en HTML, ya que nos van a permitir "maquetar", darle la aparencia externa a nuestra página, como lo verá el usuario. La técnica es dividiendo la página en pequeñas celdas e insertando en cada celda de la tabla, el elemento y/o los elementos que compondrán nuestra página web. Este método era el único lógico hasta la que se quedo desfasado por la aparición de las Hojas de Estilo, CSS.

Estructura de una tabla:

Las tablas están formadas por celdas agrupadas en filas ----> y columnas |
Una fila esta compuesta por uno o más espacios (celdas) alineados horizontalmente.
Una columna esta compuesta por uno o más espacios alineados verticalmente.
Una celda es el espacio formado por la intersección de una fila y una columna
El número de celdas esta componen la tabla esta definido por el diseñador de la página.

	Columna 1	Columna 2	Columna 3
Fila 1	Celda (1,1)	Celda (2,1)	Celda (2,1)
Fila 2	Celda (2,1)	Celda (2,2)	Celda (2,1)
Fila 3	Celda (3,1)	Celda (3,1)	Celda (2,1)

Sin embargo no es todo tan fácil a la hora de trabajar con tablas, puesto que algunas veces parecen comportarse de una forma ilógica, por tanto debemos de conocer todo lo referente a ellas incluso algunos pequeños trucos que existen.

Esto es debido a que en el origen del lenguaje HTML las tablas fueron diseñadas por científicos de las universidades para contener y organizar informacián, no como una ayuda para el diseño gráfico de la página, ya que en esa época el lenguaje y las páginas web se concebían como una forma de transmitir texto plano, en monitores monocromos y de poca resolucián, y no fué hasta el posterior desarrollo de Internet, de la WWW y de la tecnología de ordenadores personales avanzados cuando se empezó a tener en cuenta la importancia del diseño visual de una página web como un medio global para transmitir no solo texto plano, si no también contenidos gráficos y multimedia.

Para conseguir que las tablas funcionen perfectamente necesitamos conocer muy bien todos los atributos de las tablas. Además de algunos truquillos que se han echo famosos a lo largo del tiempo.

Veamos como se define una tabla:

1. Las tablas se crean con la etiqueta <table>...</table> la tabla está contenida entre esta etiqueta
2. Las filas se definen con la etiqueta <tr>...</tr> table row, (row = fila en inglés)
3. Cada etiqueta <tr> contiene celdas que inicialmente coincidirán con el número de columnas, definidas por medio de la etiqueta <td>...</td>
4. Cada celda de datos puede contener lo que quieras insertar : texto, Imágenes, listas, e incluso otras tablas.

La estructura de una tabla, se puede ver fácilmente en el siguiente esquema :

<table>

<tr>

<td>...</td>

<td>...</td>

<td>...</td>

</tr>

<tr>

<td>...</td>

<td>...</td>

<td>...</td>

</tr>

<tr>

<td>...</td>

<td>...</td>

<td>...</td>

</tr>

</table>

Que llevado al HTML es:

   
  <table>
      <tr> 
	    <td> celda (1,1)</td> 
	    <td> celda (1,2)</td>
	    <td> celda (1,3)</td>
      </tr> 
      <tr>
            <td> celda (2,1)</td> 
	    <td> celda (2,2)</td>
	    <td> celda (2,3)</td>
     </tr> 
     <tr>
            <td> celda (3,1)</td> 
	    <td> celda (3,2)</td>
	    <td> celda (3,3)</td>
     </tr>
  </table> 
 

Se verá como:

celda (1,1)	celda (1,2)	celda (1,3)
celda (2,1)	celda (2,2)	celda (2,3)
celda (3,1)	celda (3,2)	celda (3,3)