Las alternativas posibles en tablas

Ya conocemos cómo crear una distribución simple en filas y columnas. Pero existen muchas más posibilidades. Las etiquetas colspan y rowspan .
Ya conocemos cómo crear una distribución simple en filas y columnas. Pero existen muchas más posibilidades. Las etiquetas colspan y rowspan .
(0)
21 de agosto de 2000  

En el número último de esta columna generamos una tabla donde todas las celdas estaban ocupadas con valores o textos y, además, guardaban una idéntica superficie por filas o columnas.

Pero es posible crear también casillas que ocupen más de una fila o columna. Para eso, conoceremos los atributos rowspan y colspan de las etiquetas TH y TD .

Si quisiéramos diseñar una tabla como la que ilustra esta nota, un código fuente típico sería:

HTML>

HEAD>

TITLE>Nombre de la página /TITLE>

/HEAD>

BODY>

TABLE border=4 width=100% cellspacing=8>

TR>TH rowspan="2">TH colspan="2">Valores promedio

TH rowspan="2">Mortalidad BR>al nacer

TR>TH>Peso máximoTH> Vida máxima

TR>TH>PerrosTD> 50TD>15TD>10%

TR>TH>Gatos TD>7TD13TD>9%

/TABLE>

/BODY>

HTML>

Aparecen en escena nuevos objetos. En la etiqueta TABLE , aplicamos el atributo cellspacing , que sirve para ordenar al browser que habrá un espacio entre celdas de 8 pixeles. En este caso, width -ancho de la tabla- ocupará todo el largo de la pantalla.

En el primer tag TH que aparece escribimos rowspan="2" . Esto significa que la primera de las celdas tendrá una altura de dos filas.

En la segunda celda en sentido horizontal, con el atributo colspan= "2" indicamos al navegador que interprete que el texto Valores promedio tendrá en HTML dos columnas de ancho.

Veamos que tanto para TR , TH como TD no les colocamos un tag de cierre e igual aparece la página de la manera que quería el webmaster.

Con estos atributos descubrimos que las posibilidades de formas se amplían muchísimo.

Ya no estaremos restringidos a tablas rígidas encolumnadas.

Por otra parte, de asignar a border un valor 0 desaparecerán de pantalla tanto el perímetro como las líneas que separan todas las celdas, por lo que imágenes y textos podrán ubicarse con mayor libertad sobre el espacio disponible en el documento HTML.

MÁS leídas ahora

Esta nota se encuentra cerrada a comentarios

Descargá la aplicación de LA NACION. Es rápida y liviana.