Suponga que quiere una mesa como esta:

Los atributos de ROWSPAN y COLSPAN

Aquí, las dos células de la parte superior se extienden a través de las dos células de la parte inferior. Para un una compleja tabla de diferentes tamaños de células como esta, puedes usar ROWSPAN y COLSPAN. Esto puede ser bastante complejo. Pero recuerda que las columnas bajan, y las filas cruzan. Para que una célula grande se extienda horizontalmente a través de dos células más pequeñas, el código sería esto:

...y el de los niños... TD COLSPAN = 2 Equipo de casa</TDD;
TD COLSPAN = 2 Equipo de salida<BR&;/TD&;

El atributo COLSPAN tiene el valor de dos porque una célula TD va a se extienden a través de dos columnas. Tenemos 4 columnas en nuestra tabla de arriba, así que la primera La etiqueta TD abarcará dos columnas, y también la segunda. Si añadimos algunas de las otras etiquetas de la tabla, podría tener una mejor idea de lo que es ...que se está llevando a cabo.

...los resultados del fútbol...

...y el de los niños... TD COLSPAN = 2 Equipo de casa</TDD;
TD COLSPAN = 2 Equipo de salida<BR&;/TD&;

...y la de los niños... Arsenal</TDD;
...2</TDD;
Leeds</TDD&
...1</TDD;

Si quisiéramos que una gran celda se extendiera por todas nuestras filas, corriendo por la izquierda lado, usaríamos ROWSPAN. El código sería este (el "tag" se una celda en blanco):

...y el de los niños... TD ROWSPAN = 6

Y este sería el efecto:

Los atributos de ROWSPAN y COLSPAN

Habrás notado que aunque el código era este:

...y el de los niños... TD ROWSPAN = 6

El número de filas en la tabla era en realidad sólo cinco. Entonces, ¿por qué poner el ROWSPAN a las 6? Bueno, es porque teníamos 5 juegos de etiquetas TR en nuestra mesa, más el de La etiqueta TR que añadimos para el ROWSPAN haciendo 6 en total. El código de toda la tabla arriba se ve así:

Los atributos de ROWSPAN y COLSPAN

No hay duda de ello, sin embargo, la creación de una compleja tabla con las células que se extienden a través de otras células puede ser un asunto delicado cuando estás codificando a mano!

En la próxima lección, aprenderás sobre los atributos de la tabla.

| Atributos de la tabla |

Recomendado para ti