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

Escrito por foye robinson | Traducido por jane laury
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo crear 3 columnas en HTML para una página web
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.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

    El uso de DIV

  1. 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.

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

    <html> <head> <style> <!--

    main {

    width:100%; } .column1 { background-color:yellow; padding:2px; margin-right:5px; width:150px; float:left; } .column2 { background-color:blue; padding:2px; margin-right:5px; width:75px; float:left; } .column3 { background-color:red; padding:2px; margin-right:5px; width:100px; float:left; } --> </style> </head>

    <body> <div id="main"> <div class="column1">Contenido de la primera columna</div> <div class="column2">Contenido de la segunda columna</div> <div class="column3">Contenido de la tercera columna</div> </div> </body> </html>

  3. 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

  1. 1

    Selecciona "Archivo" y "Nuevo" en el menú de tu editor de texto favorito.

  2. 2

    Copia y pega el siguiente código HTML en tu página para insertar tres columnas:

    <html> <body> <table width="100%"> <tr> <td style="width:250px; background-color:yellow; text-align:top;">Contenido de la primera columna </td> <td style="width:250px; background-color:blue; text-align:top;">Contenido de la segunda columna </td> <td style="width:250px; background-color:red; text-align:top;">Contenido de la tercera columna </td> </tr> </table> </body> </html>

  3. 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;

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles