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.

fuente: http://es.html.net/tutorials/html/lesson11.php