Spanning

En ocasiones, queremos lograr que una celda de una tabla ocupe el lugar de varias; ya sea a lo alto o a lo ancho. A esto se le conoce como Spanning. En los ejemplos mostrados abajo, la tabla de la izquierda usa RowSpanning (una hilera (Row) ocupa el lugar de 2). La tabla de la derecha usa ColSpanning.

Para lograr esto, se utilizan los atributos rowspan y colspan de <TD> respectivamente.

Rowspan

Para el ejemplo de la derecha, necesitamos que la primera celda (color verde) ocupe 2 hileras (Rows). Abajo se encuentra el código para lograrlo.

...
<TABLE width=100% border=1>
<TR><TD rowspan="2"> </TD><TD> </TD></TR>
<TR><TD> </TD></TR>
</TABLE>
...

Nótese como el la segunda hilera, sólo se declara una celda. Puesto que el la hilera anterior se declaran 2 celdas, uno esperaría que todas las hileras tuvieran el mismo número de celdas. Sin embargo, como se declaró en la primera hilera, que la primera celda se extendía 2 hileras, en la siguiente hilera, se omite.

Colspan

Para utilizar Colspan, se siguen reglas muy parecidas a las de Rowspan. En el ejemplo de la derecha, la celda color verde tiene un Colspan="2". Abajo se muestra el código.

...
<TABLE width=100% border=1>
<TR><TD colspan="2"> </TD></TR>
<TR><TD> </TD><TD> </TD></TR>
</TABLE>
...

En este caso, la primera hilera contiene una sola declaración de celdas, ya que ésta "vale por dos".

Tablas Anidadas

El link de esta lección es: http://flores-morones.net/geo/roflo1/HTML/Tablas/span.html (Se abre en toda la ventana).

<A href=../izq.html>Índice</A>