Esta es una pagina web que sin usar varias tablas dentro de tablas se ordena simplemente con css y divs, se limpia bastante el codigo fuente de la pagina ya que la estructura principal esta en el css y desde html solo llamaremos nuestros sectores declarados en el css.
estilo.css
body {
margin:0;
padding:0;
text-align:center;
background-color:#D8D8D8;
}
/* Pagina completa englobada */
#content {
text-align:left;
margin:auto;
background-color:#D8D8D8;
width:800px;
height:800px;
}
/* Header: Cabecera de pagina */
#header {
width: 800px;
height:100px;
border: 1px solid black;
background-color:#00FF00;
/* background-image: url(ruta_de_la_imagen_de_fondo); */
}
/* Barra lateral izquierda (vertical) */
#barra_v {
width:150px;
height:594px;
float:left;
border: 1px solid black;
background-color:#FF00FF;
/* background-image: url(ruta_de_la_imagen_de_fondo); */
border: 1px solid black;
}
/* Barra horizontal */
#barra_h {
width:800px;
height:30px;
float:left;
border: 1px solid black;
background-color:#0000FF;
/* background-image: url(ruta_de_la_imagen_de_fondo); */
}
/* Contenido principal (Cuadro principal) */
#contenido {
width:650px;
height:594px;
float:left;
background-color:#FFFFFF;
border: 1px solid black;
/* background-image: url(ruta_de_la_imagen_de_fondo); */
}
/* Footer: Pie de pagina */
#footer {
clear:both;
width:800px;
height:50px;
background-color:#D8D800;
border: 1px solid black;
/* background-image: url(ruta_de_la_imagen_de_fondo); */
}
index.html
<html>
<head>
<title>Mi Pagina web dividida con css</title>
<link href="estilo.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="content">
<div id="header">Esto aparecera en el sector del header</div>
<div id="barra_h">Esto aparesera en el sector de la barra horizontal bajo el header header</div>
<div id="barra_v">Nuestra barrita vertical de la izquierda</div>
<div id="contenido">El sector de nuestro contenido principal</div>
<div id="footer">Aqui pone los derechos de autor y uno que otro enlace :P estas en el footer</div>
</div>
</body>
</html>
El codigo de index.html es el que se vera cuando el usuario vea el codigo fuente de la pagina, si se fijan se ve bastante mas ordenado que <table><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></table>
xD... enjoy!
