Cómo crear columnas mediante etiquetas DIV (En 6 Pasos)

Por randall shatto

Las etiquetas DIV tienen una gama más amplia de funciones que las etiquetas HTML comunes. Creas una página web versátil cuando utilizas este tipo de herramientas. Las tablas normales de HTML son difíciles de diseñar y no son tan flexibles. Las DIV son parte del documento HTML. Agrega estas etiquetas siempre que necesites colocar columnas dentro de tu página web. Una vez que tengas el color de fondo o la textura escrita en tu documento, colocarás las etiquetas DIV para crear las columnas.

Paso 1

Agrega el código "<div style ='" para cada línea por separado de las columnas. Esto explica el propósito del código inicial.

Paso 2

Introduce los píxeles de alto, ancho y bordes. El código se mostrará como "<div style = 'height: 550px; width: 220px; border: 3px". Si no deseas un borde alrededor de tus columnas, establece el píxel del borde a cero.

Paso 3

Ajusta el color del borde. Puedes utilizar los mismos colores o diferentes. Usa "solid" o "double" para el tipo de borde. Tu código será similar "<div style='height: 550px; width: 220px; border: 3px solid black;".

Paso 4

Añade la alineación. El comando "Float" permite alinear las columnas adicionales junto a la primera columna. Inserta "float: (direction);" para la etiqueta DIV de alineación. El código hasta este punto es "<div style='height: 550px; width: 220px; border: 3px solid black; float: left;".

Paso 5

Cerrar la etiqueta DIV. Cierra el código con "'>", luego, termina con

. Por ejemplo, el código completo está en este formato "
".

Paso 6

Agrega otra columna al lado de la primera con otra etiqueta DIV. Por ejemplo, si quieres cuatro columnas de una fila, este sería el código: