Estructura de la tabla

Son cinco las etiquetas que permiten construir tablas, incluyendo la misma etiqueta <table> y la etiqueta <captation> que sirve para incluir una descripción de la tabla. Podemos crear una tabla fila por fila, colocando entre las etiquetas de inicio (<tr>) y de fin de la fila (</tr>) etiquetas de encabezamiento de la tabla (<th>) o de datos (<td>) con el contenido que corresponde en cada celda.

<table> < - - - Delimita el comienzo de la tabla.
<captation>...</captation> < - - - Permite añadir una leyenda para explicar el contenido de la tabla.
<tr> < - - - Inicio de la primera fila.
<th>...</th> < - - - Inicio y fin de la cabecera de la primera columna.
</tr> < - - - Fin de la primera fila.
<tr> < - - - Inicio de la segunda fila.
<td>...</td> < - - - La primera columna de datos.
</tr> < - - - Fin de la segunda fila.
</table>   < - - - Fin de la tabla.

Veamos el ejemplo más simple:


Ejemplo

<table border>
<captation> Descripción de la tabla </captation>
<tr>
<th>Cabecera de la primera columna y primera fila</th>
</tr>
<tr>
<td>Datos de la primera columna y segunda fila</td>
</tr>
</table>


 

Es preciso que nos fijemos en un par de detalles de este ejemplo. Las etiquetas <th> y <td> funcionan de manera similar; las únicas diferencias reales son que la primera presenta el texto del encabezamiento centrado y con negrita. Por otra parte, hemos utilizado el atributo border de la etiqueta <table> para obligar al navegador a dibujar las cuatro líneas alrededor de la tabla.

Normalmente, las tablas se alinean con respecto al margen izquierdo del texto actual. Para centrar la tabla en la ventana del navegador utilizamos la etiqueta <center>.


Ejemplo

<center>
<table border>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
</table>
</center>


 
 

Arriba