Identificarse | Registrarse | FAQ
Anonymous

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

El título "... y más tablas" puede sonar algo aburrido. Pero míralo por el lado bueno; cuando domines las tablas, nada de nada en HTML te podrá dejar K.O.

Entonces, ¿qué más queda por conocer?

Los atributos colspan y rowspan se usan cuando queremos crear tablas elaboradas.

Colspan es la abreviatura de "column span" (expandir columna). Colspan se usa con la etiqueta <td> para especificar cuántas columnas ocupará la celda:

Ejemplo 1:


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

que se visualizará así en el navegador:

Celda 1
Celda 2 Celda 3 Celda 4

Al establecer el atributo colspan a "3", la celda de la primera fila ocupa tres columnas. Si hubiésemos establecido colspan a "2", la celda sólo habría ocupado dos columnas y habría sido necesario insertar una celda adicional en la primera fila para que la cantidad de columnas sea igual en las dos filas.

Ejemplo 2:


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

que se verá así en el navegador:

Celda 1 Celda 2
Celda 3 Celda 4 Celda 5

¿Y el atributo rowspan?

Como ya habrás adivinado, rowspan especifica cuántas filas debería ocupar una celda:

Ejemplo 3:


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

que se verá así en el navegador:

Celda 1 Celda 2
Celda 3
Celda 4

En el ejemplo anterior el atributo rowspan se establece con el valor "3" en la Celda 1. Esto especifica que la celda debe expandirse a lo largo de tres filas (o sea, ocupa la suya propia y dos más). La Celda 1 y la Celda 2 , por tanto, están en la misma fila, mientra que la Celda 3 y la Celda 4 forman dos filas independientes.

¿Confundido? Bueno, la verdad es que no es sencillo, y es fácil perderse. Por lo tanto, sería una buena idea dibujar la tabla sobre un trozo de papel antes de empezar a escribir el código HTML.

¿Que no estas confuso? Pues sigue adelante y crea un par de tablas tú solo usando los atributos colspan y rowspan.



<< Lección 10: Tablas

Lección 12: Presentación (CSS) >>