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
Ahora para el index o nuestra pagina html tan solo la tenemos que dividir en diferentes divs y aplicarles estas propiedades.
index.html:
Ahora aqui muestro la imagen de como ha quedado formateado
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