CSS Colspan

"En este artículo, veremos la propiedad de Colspan, que está disponible en el directorio CSS y se puede usar en una tabla. La propiedad Colspan se usa para abarcar columnas de una tabla en una sola celda combinándolas en una sola entidad. Esta propiedad se puede usar tanto en los elementos de la tabla, que son etiquetas de datos de encabezado de tabla y tabla. CSS nos permite usar esta propiedad con otras propiedades también en la misma etiqueta, que también implementaremos en este artículo."

Ejemplo 01: Uso de la propiedad CSS Colspan en la etiqueta de datos de la tabla en un archivo HTML

En este ejemplo, utilizaremos la propiedad Colspan que CSS proporciona para abarcar dos columnas de una tabla que serán datos de la tabla en este caso. Usaremos esta propiedad directamente dentro de la etiqueta TD para abarcar una fila en una sola celda de una tabla.

En este script, abriremos la etiqueta del encabezado y comenzaremos con la etiqueta de estilo para proporcionar un estilo a la tabla y sus elementos como el encabezado de la tabla y los datos de la tabla. Después de proporcionar propiedades de estilo, se abrirá la etiqueta para el cuerpo de la página. En la etiqueta del cuerpo, crearemos nuestra tabla con cuatro filas usando la etiqueta TR. En la primera fila, agregaremos el encabezado de la tabla usando la etiqueta TH. Luego, en la segunda y tercera filas, pondremos datos en las columnas de la tabla utilizando la etiqueta TD.

Luego agregaremos otra fila en la que ambas columnas de la tabla se fusionarán utilizando la propiedad Colspan. La propiedad Colspan se define en la etiqueta de datos de la tabla utilizando la palabra clave Colspan con el número de columnas que queremos en nuestra tabla como argumento. En esta fila, agregaremos la suma de los elementos de la tabla en las dos filas anteriores. Después de esto, cerraremos las etiquetas restantes y abriremos el archivo en nuestro navegador usando el ".formato HTML ".

Como podemos ver en la salida anterior, hemos agregado cuatro filas a la tabla, con la última fila que consiste en una sola celda compuesta por dos columnas debido a la propiedad de Colspan agregada dentro de la etiqueta TD.

Ejemplo 02: Uso de la propiedad CSS Colspan en el encabezado de la tabla en un archivo HTML

En este ejemplo, utilizaremos la propiedad Colspan de CSS para abarcar los componentes de la tabla, que será el encabezado de la tabla en este caso. Este atributo se usará precisamente dentro de la etiqueta TH para abarcar una fila en una sola columna de una tabla.

Abriremos la etiqueta de encabezado y comenzaremos con la etiqueta de estilo para diseñar la tabla y sus características, como el encabezado de la tabla y los datos de la tabla en este script. La etiqueta para el cuerpo de la página se abrirá después de suministrar atributos de estilo. Usando el elemento TH, agregaremos la tabla que se dirige a la primera fila. La propiedad Colspan se usará para combinar las columnas de ambas tablas en esta fila. La propiedad Colspan se especificará en la etiqueta de encabezado de tabla utilizando la palabra clave Colspan con el número de columnas en nuestra tabla como entrada. El encabezado de esta mesa servirá como un encabezado colectivo para toda la mesa.

Hemos agregado tres filas a la tabla, como se indica en el resultado anterior, la primera de las cuales es una sola celda compuesta por dos columnas debido al atributo Colspan aplicado dentro de la etiqueta TH, por lo que es un encabezado común para todos los componentes de la tabla.

Ejemplo 03: Uso de la propiedad CSS Colspan en el encabezado y la etiqueta de datos de tabla de la misma tabla en un archivo HTML

Utilizaremos la propiedad Colspan de CSS para abarcar dos componentes de la tabla, que en este caso serán el encabezado de la tabla y la etiqueta de datos de la tabla en este ejemplo. Esta propiedad se utilizará particularmente dentro del TH, y las etiquetas TD para abarcar una fila en una sola columna de una tabla, lo que resulta en dos filas abarcadas.

En este script, abriremos la etiqueta del encabezado y comenzaremos con la etiqueta de estilo para peinar la tabla y sus componentes, como el encabezado de la tabla y los datos de la tabla. Después de proporcionar atributos de estilo, se abrirá la etiqueta para el cuerpo de la página. En la etiqueta del cuerpo, crearemos una tabla con cuatro filas usando la etiqueta TR. El encabezado de la tabla se agregará a la primera fila usando el elemento TH. La propiedad Colspan se usará para combinar las columnas de ambas tablas en esta fila. La propiedad Colspan se proporcionará en el elemento de encabezado de tabla utilizando la palabra clave Colspan como entrada y el número de columnas en nuestra tabla como salida. El encabezado de esta tabla funcionará como el encabezado general de la tabla.

Luego agregaremos otra fila después de la tercera fila en la que usaremos el atributo Colspan para combinar las columnas de la tabla. Agregaremos el total de los componentes de la tabla de las dos filas anteriores en esta fila.

Como se muestra en la salida anterior, agregamos cuatro filas a la tabla, la primera de las cuales es una sola celda compuesta por dos columnas debido al atributo Colspan aplicado dentro de la etiqueta TH, por lo que es un encabezado común para todos los componentes de la tabla, y el último de los cuales también es una sola que representa la suma de los números de las filas anteriores.

Ejemplo 04: Uso de la propiedad CSS Colspan y RowsPan en la misma tabla en un archivo HTML

En este ejemplo, utilizaremos las propiedades Colspan y Rowspan de CSS para abarcar dos columnas de tabla de dos filas. Esta propiedad se usará particularmente dentro de la etiqueta TH para crear una celda de dos columnas y dos filas en una tabla.

En este script, abriremos la etiqueta del encabezado y comenzaremos a diseñar la tabla y sus propiedades, como el encabezado de la tabla y los datos de la tabla, con la etiqueta de estilo. Después de proporcionar atributos de estilo, se abrirá la etiqueta para el cuerpo de la página. En la etiqueta del cuerpo, crearemos una tabla con tres filas usando la etiqueta TR. El encabezado de la tabla se agregará a la primera y segunda filas utilizando la etiqueta TH.

Luego, en esta fila, las propiedades Colspan y RowsPan se utilizarán para combinar las columnas de ambas tablas. La propiedad Colspan se especificará en el elemento de encabezado de la tabla utilizando la palabra clave Colspan como entrada, y la propiedad RowsPan se especificará de la misma manera. Luego, en la segunda y tercera filas, pondremos datos en las columnas de la tabla utilizando la etiqueta TD.

Como se muestra en el resultado anterior, agregamos tres filas y tres columnas a la tabla, la primera de las cuales es una sola celda compuesta por dos columnas y dos filas debido a los atributos Colspan y Rowspan aplicados dentro de la etiqueta TH.

Conclusión

En este artículo, hemos discutido la propiedad de Colspan que CSS proporciona en un archivo HTML. Esta propiedad generalmente se agrega a los elementos de la tabla como el encabezado de la tabla y los datos de la tabla para crear celdas abarcadas de múltiples columnas. La propiedad de ColSpan se puede agregar varias veces en una tabla para mostrar datos más presentables al usuario, que implementamos en este artículo en el Notepad ++ IDE. También implementamos esta propiedad con la propiedad RowsPan como ejemplo para desarrollar una mejor comprensión de los usos de esta propiedad.