El atributo colspan es una función HTML que permite que una celda de una tabla en una página web se extienda sobre varias columnas. HTML es una de las principales formas en que se crean las páginas web. Una forma de incorporar estructura a una página web HTML es el concepto de tabla. Una tabla tiene varias filas y columnas. La información de las celdas individuales de la tabla aparece organizada vertical y horizontalmente.
A menudo, al mostrar una tabla HTML, a uno le gustaría que cierta información se aplicara o se distribuyera en varias columnas. Cuando dicha información se limita a una fila, el atributo colspan resulta útil. Por lo tanto, colspan = N, donde N es un número como 2, 3, etc., indica que la celda se extiende o abarca tantas columnas.
Considere un ejemplo en el que los datos de ventas se muestran como una tabla con tres encabezados de columna: la región de ventas, la persona que encabeza la región y el monto de las ventas. Cuando se muestra el total, solo interesa el monto total de las ventas. La celda de la persona estará vacía en esa fila. En lugar de mostrar una celda vacía, es bueno llamar la atención sobre el total. El siguiente código logra esto.
En este ejemplo, se crea una tabla y se especifican tres encabezados (Región, Jefe de ventas y Ventas), seguidos de tres filas de datos. Cada celda de la tabla está indicada por el atributo td, para «datos de la tabla». En la cuarta fila, se proporciona la frase Ventas totales junto con el monto total. Observe que la frase «Ventas totales» se enfatiza por su celda que abarca dos columnas: la columna Región y la columna Cabecera; esto se logra especificando colspan = 2. Esta celda abarca dos columnas, por lo que esta fila tiene solo dos atributos td y no tres como en las otras filas.
Uno puede copiar este código en un archivo de texto y abrirlo en un navegador para ver el efecto. Es posible que una página web no requiera mostrar datos dentro de las celdas de la tabla como en el ejemplo anterior. Sin embargo, el concepto de tabla es muy útil para organizar la información en una página web.
Una página web a menudo consta de un encabezado en la parte superior, como el nombre y el logotipo de la empresa, uno o más menús en la parte superior o en los lados, información principal en el medio e información de resumen en la parte inferior. Para lograr esto, se puede usar una estructura de tabla debajo sin que el lector se dé cuenta. Muy a menudo, cierta información se distribuye en varias columnas utilizando el atributo colspan, lo que evita que la página web se vea torpe.
Como ejemplo, uno puede querer una página personal con tres columnas: Familia, Carrera y Comunidad. Sería un buen efecto romper las columnas monótonas con una foto, en algún lugar de la página, en la que se extiende por todas las columnas. El siguiente código logra esto con un valor de intervalo de 3.