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.
Por foye robinson

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

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


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:

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


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;