Cómo crear 3 columnas en HTML para una página web (En 6 Pasos)
Las columnas permiten la personalización del diseño de una página web, ya que muestran la información de manera vertical y ayudan a distinguir entre áreas separadas. En una página de tres columnas, utiliza la primera columna para navegar, la columna central para su contenido principal y la última columna para exhibir la información adicional que deseas promover. El lenguaje "Hyper Text Markup Language" (HTML por sus siglas en inglés) te permite usar las etiquetas "DIV" o “TABLE” para crear columnas y especificar los bordes, el tamaño y el fondo de las celdas.
El uso de DIV
Paso 1
Inicia un editor de texto, como el Bloc de notas, WordPad o EditPad. Selecciona "Archivo" y "Nuevo" en el menú para crear un nuevo documento.
Paso 2
Copia el siguiente código de HTML en tu página para agregar tres columnas a la página, usando el atajo de teclado "Ctrl" y "C" y luego pégalo con "Ctrl" y "V":
Paso 3
Reemplaza "width" para ".column1", ".column2" y ".column3" con el ancho que desees establecer. Vuelva a colocar el valor "background-color" para cada columna con el color de fondo que desees aplicar. Para crear columnas sin fondo, quita la línea que contiene "background-color", por ejemplo como:
background-color: red;
Uso de Tablas
Paso 1
Selecciona "Archivo" y "Nuevo" en el menú de tu editor de texto favorito.
Paso 2
Copia y pega el siguiente código HTML en tu página para insertar tres columnas:
| Contenido de la primera columna | Contenido de la segunda columna | Contenido de la tercera columna |
Paso 3
Vuelve a colocar el ancho con la medida de columna que deseas establecer. Reemplaza el valor de "background-color" con el fondo que deseas. Para quitar el color de fondo, retira tu código como por ejemplo:
background-color:yellow;
