Crear tablas CSS facilmente en html sin uso de table (Formateo de una pagina sin el uso de tablas).

Hoy les daré una solución sencilla para el formateo de una página web sin necesidad de usar tablas.
Esto nos ayudará a tener un código mucho mas limpio y legible además que el uso de tablas aveces dificulta el trabajo en fases altas de un proyecto bien primero les pondré el codigo css:

tabladoble.css

@charset "utf-8";
/* CSS Document */
body{
    margin: 0 2em 0 2em;
    padding: 0;
}
#columnaizquierda{
    float:left; /*aparece la columna a la izquierda*/
    width:66%; /*indica la cantidad de pagina que tomará para mostrarse*/
}
#columnaderecha{
    float:right;
    width:34%;
}
#textoabajo{
    clear:both; /*hace que la columna de abajo este alineada de izq y der.*/
}


Ahora para el index o nuestra pagina html tan solo la tenemos que dividir en diferentes divs y aplicarles estas propiedades.

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página principal</title>
<link href="tabladoble.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id=columnaderecha>
<p>Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces
</p>
</div>

<div id=columnaizquierda>
<p>Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces Esto debe ser un texto bastante grande para mostrar bien el ejemplo asi que copiame y pegame varias veces
</p>
</div>

<div id=textoabajo>
<p>Aqui puedes poner otro texto como podria ser el copyright<p>
</div>

</body>
</html>

Ahora aqui muestro la imagen de como ha quedado formateado











Comentarios

Entradas populares de este blog

¿Cómo cerrar sesión en todos los dispositivos de Instagram?

Chris Rock no aparece desde la broma en los Oscares a Jada Smith!!

Nissan March 2020 VS Chevrolet Spark 2020