Skip to main content

¿Qué son las columnas HTML?

En los documentos del lenguaje de marcado de hipertexto (HTML), las columnas son una forma de definir un área de un sitio web que generalmente tiene un ancho menor que el ancho total visualizable de una página. Las columnas HTML permiten a los diseñadores de páginas web utilizar un formato similar al formato de impresión sin tener que recurrir a trucos poco confiables, como imágenes en blanco, para crear espacios. Cada columna también puede usar elementos estándar para definir su ancho, alineación y espaciado. Tradicionalmente, las columnas HTML eran solo una parte de una tabla HTML más grande, aunque la introducción de hojas de estilo en cascada (CSS) hizo posible definir una columna sin tener que crear una tabla completa. Existen algunos problemas de formato y compatibilidad que vienen con el uso de columnas HTML, aunque estos pueden superarse en gran medida con un diseño y codificación cuidadosos.

Las columnas HTML originalmente eran una parte de una estructura de formato más grande conocida como tabla. Una tabla HTML puede considerarse como una cuadrícula, con cada cuadrado en la cuadrícula llamada celda. Una columna es una colección de celdas que se alinean consecutivamente y se ejecutan de arriba a abajo. Una tabla generalmente tiene múltiples columnas. Cada celda de una columna puede tener su propio formato y espaciado independientes, además de poder abarcar más de una fila.

Con CSS, las columnas HTML en realidad no son parte de una tabla, sino que son divisiones de espacio anidadas dentro de otras divisiones. Esto permite múltiples columnas como una tabla HTML, excepto que las características de CSS permiten aplicar exactamente el mismo formato a muchas páginas en un solo sitio. Sin embargo, el uso de CSS para formar columnas causa problemas con la implementación de las etiquetas de división en ciertos navegadores en los que la alineación y el tratamiento de las columnas y su contenido no se adhieren a los estándares aceptados.

El ancho de las columnas HTML se puede especificar en el código de un documento, ya sea indicando las dimensiones exactas de los píxeles o mediante una medición de porcentaje relativo. Esto significa que se puede crear una columna indicando que tiene 200 píxeles de ancho o un 25 por ciento del ancho de la pantalla del visor. Especificar las dimensiones en píxeles de una columna puede ayudar a garantizar que las imágenes y otros elementos de diseño avanzados estén perfectamente organizados y escalados, aunque significa que la página puede parecer mucho más grande o más pequeña de lo deseado en varias resoluciones de pantalla. Crear una columna usando porcentajes relativos significa que la columna se escalará a las dimensiones deseadas sin importar el tamaño de la pantalla del espectador, pero conduce a problemas en los que el contenido de la columna puede mostrarse incorrectamente debido a un espacio adicional o insuficiente.