Atributos de las Tablas – Parte V

Ahora analizaremos dos atributos que aplican a las celdas, y que sirven para modificar el aspecto de las tablas:

  • colspan
  • rowspan

Atributo colspan

Este atributo permite expandir una celda un determinado número de celdas en la dirección horizontal, de forma que esta celda fusionada abarca varias columnas. El formato es:

<td colspan=”valor”>, donde valor representa el número de celdas que se están fusionando.

Atributo rowspan

Este atributo permite unir varias celdas en una celda que abarca varias filas. El formato es:

<td rowspan=”valor”>, donde valor representa el número de celdas que se están fusionando.

En el siguiente ejemplo se muestra un documento donde se aplican los atributos colspan y rowspan. Estos se aplican a las celdas, es decir, a la etiqueta <td> o <th>.

tablespan1
Fragmento de documento HTML con aplicación de atributos colspan y rowspan.

Cuando se fusionan las celdas, la celda fusionada desaparece del documento. En el ejemplo la celda 2 se expande hasta la celda 3, por lo que ya no existe más la celda 3, hay que eliminarla del documento html.

tablespan3
Al expandir la celda 2 hacia la celda 3 y formar una celda de dos columnas, hay que eliminar la celda 3 del documento HTML.

Cuando la celda 4 se expande verticalmente 2 celdas, y se fusiona con la celda 7, debemos eliminar la celda 7 del documento.

tablespan4
Al expandir la celda 4 hacia la celda 7 y formar una celda que abarca 2 filas hay que eliminar la celda 7 del documento HTML.

El resultado final de unir celdas en columnas (colspan) y celdas en filas (rowspan) es el que se muestra a continuación. Tablespan2.png.

tablespan2
Salida mostrando el uso de colspan y rowspan.
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s