Identificarse | Registrarse | FAQ
Anonymous

Lección 10: Tablas

Las tablas se usan cuando necesitamos mostrar "datos en formato de tabla", o sea, información que se presenta de forma lógica en filas y columnas.

¿Es díficil?

Construir tablas con HTML puede parecer, al principio, complicado, pero si no pierdes la calma y andas con ojo, en realidad es de lo más lógico: como todo en HTML.

Ejemplo 1:


	<table>
	  <tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
	  </tr>
	  <tr>
		<td>Celda 3</td>
		<td>Celda 4</td>
	  </tr>
	</table>
		

que se verá asi en el navegador:

Celda 1 Celda 2
Celda 3 Celda 4

¿Qué diferencia hay entre <tr> y <td>?

Como observarás en el ejemplo anterior, éste es probablemente el ejemplo más complicado de código HTML que hemos escrito hasta el momento. Vamos a desglosarlo y a explicar las diferentes etiquetas:

Para insertar tablas se usan 3 elementos diferentes:

  • La etiqueta de inicio <table> y la etiqueta de cierre </table> inician y finalizan la tabla. Lógico.
  • <tr> es la abreviatura de "table row" (es decir, fila de la tabla) e inicia y finaliza las filas horizontales. Lógico también.
  • <td> es la abreviatura de "table data" (es decir, datos de la tabla). Esta etiqueta inicia y finaliza cada una de las celdas que componen las filas de la tabla. Todo sencillo y lógico.

Y esto es lo que ocurre en el ejemplo 1: la tabla empieza con <table>, seguida de <tr>, que indica el inicio de una nueva fila. Se insertan dos celdas en esta fila: <td>Celda 1</td> y <td>Celda 2</td>. La fila se cierra a continuación con </tr> e inmediatemente después se inicia una nueva fila con <tr>. La nueva fila contiene dos celdas. Y por fin la tabla se cierra con </table>.

Vamos a dejarlo claro: las filas son líneas horizontales de celdas y las columnas son líneas verticales de celdas:

Celda 1 Celda 2
Celda 3 Celda 4

La celda 1 y la Celda 2 forman una fila, mientras que la Celda 1 y la Celda 3 forma una columna.

En el ejemplo anterior, la tabla consta de dos filas y dos columnas. Sin embargo, una tabla puede contener una cantidad ilimitada de filas y columnas.

Ejemplo 2:


	<table>
	  <tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
		<td>Celda 3</td>
		<td>Celda 4</td>
	  </tr>
	  <tr>
		<td>Celda 5</td>
		<td>Celda 6</td>
		<td>Celda 7</td>
		<td>Celda 8</td>
	  </tr>
	  <tr>
		<td>Celda 9</td>
		<td>Celda 10</td>
		<td>Celda 11</td>
		<td>Celda 12</td>
	  </tr>
	</table>
		

que se visualizará así en el navegador:

Celda 1 Celda 2 Celda 3 Celda 4
Celda 5 Celda 6 Celda 7 Celda 8
Celda 9 Celda 10 Celda 11 Celda 12

¿Existe algún atributo para el elemento table?

Por supuesto, hay atributos. Por ejemplo, el atributo border se usa para especificar el grosor del borde de la tabla:

Ejemplo 3:


	<table border="1">
	  <tr>
		<td>Celda 1</td>
		<td>Celda 2</td>
	  </tr>
	  <tr>
		<td>Celda 3</td>
		<td>Celda 4</td>
	  </tr>
	</table>
		

Que se verá así en el navegador:

Celda 1 Celda 2
Celda 3 Celda 4

El grosor de la tabla se especifica en píxeles (Véase lección 9).

Al igual que con las imágenes, se puede establecer el ancho de la tabla en píxeles, o, de modo alternativo, por medio de un porcentaje del ancho de la pantalla:

Ejemplo 4:

<table border="1" width="30%">

La tabla del anterior ejemplo se mostrará en el navegador como una tabla con un ancho equivalente al 30 % de la pantalla. Pruébalo.

¿Hay algún otro atributo?

Para las tablas existen muchos atributos. Aquí mostramos dos más:

  • align: especifica la alineación horizontal del contenido de toda la tabla, de una fila o de una sola celda. Por ejemplo, left, center o right.
  • valign: especifica la alineación vertical del contenido de una celda. Por ejemplo, top, middle o bottom.

Ejemplo 5:

<td align="right" valign="top">Celda 1</td>

¿Qué puedo insertar en las tablas?

En teoría, se puede colocar cualquier cosa dentro de una tabla: texto, enlaces, imágenes, ... Sin embargo, las tablas se usan para presentar datos en forma de tabla (es decir, datos que se pueden presentar de forma coherente en columnas y filas), así que evita colocar cosas dentro de una tabla porque quieras colocarlas una al lado de otra.

En los viejos tiempos de Internet -es decir, hace unos años-, las tablas se usaban con frecuencia como herramienta de presentación. Sin embargo, si quieres controlar la presentación de los textos y las imágenes existe un modo más guay de hacerlo (pista: CSS). Pero de eso ya trataremos más adelante.

Ahora, empieza a poner en práctica lo que acabas de aprender y diseña varias tablas de diferentes tamaños, con diferentes atributos y contenido. Esto debería de darte para unas cuantas horas de trabajo.



<< Lección 9: Imágenes

Lección 11: ... y más tablas >>

?>