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

No puedo twittear nada desde la pagina de Twitter

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

Resolver el problema en Android: An internal error occurred during: "Launching New_configuration (1)". Path for project must have only one segment.