Tablas

Contenido del Capítulo:

• Definición de una tabla (TABLE)
  • Título de la tabla (Caption)
  • Fila (TR)
  • Encabezamientos (TH)
  • Celdas (TD)

[Arriba]

Definición de una tabla

Las tablas son muy útiles para mostrar la información con un formato flexible y más elegante que una simple lista o que con texto formateado. Se usan mucho para dar formato a la página; es lo que usan las páginas que muestran la información en varias columnas. Por supuesto esto no se recomienda puesto que en un navegador que no admita tablas el diseño se irá a la porra. A pesar de esto cada vez se usan más para este propósito (yo mismo lo hago).

En este capítulo vamos a ver una sencilla introducción a las tablas y en el siguiente analizaremos con más profundidad el juego que dan.

Para montar una tabla en nuestro documento lo primero es usar las etiquetas <table> y </table>. Esta etiqueta tiene varios atributos que analizaremos en el siguiente capítulo.

Dentro de la tabla sólo podemos meter el título de la tabla (caption) o filas (tr), no puede haber otros elementos dentro de la tabla. Donde sí podemos meter otros elementos es dentro de las filas (encabezamientos ó celdas). Para mostrarlo gráficamente:

TABLE
   +----Caption
   +----TR
        +----TH
        +----TD

Veamos una tabla ejemplo. El siguiente código:

<table border=1>
	<caption>Tabla Ejemplo</caption>
	<tr>
		<th>Columna 1
		</th>
		<th>Columna 2
		</th>
	<tr>
		<td>10
		</td>
		<td>20
		</td>
	</tr>
</table>

produce la siguiente tabla:

Ahora vamos a analizar los elementos uno a uno:

Caption

Con este podemos ponerle un título a la tabla. Este título puede ir encima o debajo de la tabla. Para indicar dónde lo queremos usamos la opción align y sus valores posible son top o bottom. Si no especificamos nada se coloca encima de la tabla.

El ejemplo anterior usando <caption align=bottom>:

No es necesario poner un título a la tabla, pero si se pone debe ir justo debajo de la etiqueta <table> y sólo puede haber uno.

TR (table row)

Después de colocar el título colocamos las líneas. <tr> indica el comienzo de una línea y </tr> el final. Dentro de una línea sólo podemos meter elementos td o tr.

Esta etiqueta tiene unas opciones para alinear la etiquetas que contiene horizontalmente y verticalmente. Esto lo veremos en el siguiente capítulo.

TH (Table header)

Con las etiquetas <th> y </th> podemos colocar encabezamientos a las columnas. Estos encabezamientos en algunos navegadores aparecen en negrita. Esta etiqueta tiene las misma opciones que la etiqueta td.

Esta etiqute se suele usar poco, yo apenas la he visto en ninguna página.

TD (table data?)

Esta etiqueta puede contener cualquier cosa en su interior, desde lista hasta otras tablas. Debe ir dentro del par de etiquetas <tr> </tr>

Ahora practica un poco con las tablas para sentirte cómo con su manejo antes de pasar al capítulo siguiente.