x

Cómo crear 3 columnas en HTML para una página web

Por foye robinson
Utiliza columnas para llamar la atención sobre una determinada sección en tu sitio web.
Jupiterimages/Comstock/Getty Images

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":

Contenido de la primera columna
Contenido de la segunda columna
Contenido de la tercera columna

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;