verás, lo que dice fael es que el diseño con tablas está muy anticuado, es decir no es lo más apropiado hoy en dia dado que el diseño con divs es el que se debe utilizar (por estándares y eso).
No tienes por qué cambiar el aspecto de la página para que esté realizada en divs, por ejemplo cristalab antiguamente estaba maqutada a base de tablas y despues freddie lo fue adaptando y creándolo con divs, lo único que tienes que hacer es la estructura en XHTML y después la hoja de estilos en CSS, te pongo un ejemplo para que lo entiendas...
Este sería mi nuevo portfolio:
Código :
<!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>
<title>t.a.a.r.q.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/forma.css" media="screen" />
<script language="JavaScript" type="text/JavaScript" src="sifr/sifr.js"></script>
<link href="sifr/sIFR-screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="sifr/sIFR-screen.css" rel="stylesheet" type="text/css" media="print" />
<script language="JavaScript" type="text/JavaScript" src="css/menu.js"></script>
</head>
<!--[if IE]>
<style>
#submain_2
{
width:196px;
height:290px;
margin-right:4px;
}
</style>
<![endif]-->
<body>
<div id="container" class="float_c">
<div class="bar top">
<h1>taarq web design</h1>
</div>
<div id="header" class="float_c"></div>
<div id="menu" class="float_c">
<ul id="nav">
<li><a id="contacto" href="contacto.php"><span class="none">Contacto</span></a></li>
<li><a id="tarifas" href="tarifas.php"><span class="none">Tarifas</span></a></li>
<li><a id="perfil" href="perfil.php"><span class="none">Perfil</span></a></li>
<li><a id="servicios" href="servicios.php"><span class="none">Servicios</span></a></li>
<li><a id="ejemplos" href="ejemplos.php"><span class="none">Ejemplos</span></a></li>
<li><a id="home" href="index.php"><span class="none">Home</span></a></li>
</ul>
</div>
<div id="main" class="float_c"> <h3>taarq.com, el portafolio de Juan Jorge Muñoz Herrero</h3>
<div id="submain_2"> <img class="float_r" src="img/teclado.png" alt="taarq"/> </div>
<div id="submain_1">
<p class="text_j">Bienvenido a taarq.com, este es el sitio destinado a exponer mis trabajos de desarrollo web e interactivo, así como para contactar conmigo. Navegando por las diferentes secciones podrás encontrar una selección de mis trabajos y otros proyectos o experimentos realizados. También podrás encontrar una breve descripción de mi perfil y un resumen de los servicios que puedo ofrecer.</p>
</div></div>
<div class="bar bottom"></div>
</div>
<div id="tira"></div>
<h6>taarq web design 2006 ©</h6>
<script language="JavaScript" type="text/JavaScript">
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"sifr/q.swf", sColor:"#FFFFFF", sBgColor:"#99CC00", sLinkColor:"#454545", sHoverColor:"#999999", nPaddingTop:0, nPaddingBottom:0, nPaddingLeft:0, nPaddingRight:0, sWmode:"transparent", sFlashVars:"offsetLeft=15&offsetTop=0"}));
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"sifr/q.swf", sColor:"#586885", sBgColor:"#FFFFFF", sLinkColor:"#99CC00", sHoverColor:"#999999", nPaddingTop:0, nPaddingBottom:0, nPaddingLeft:0, nPaddingRight:0, sFlashVars:"offsetLeft=0&offsetTop=0"}));
sIFR.replaceElement(named({sSelector:"h3", sFlashSrc:"sifr/q.swf", sColor:"#99CC00", sBgColor:"#FFFFFF", sLinkColor:"#99CC00", sHoverColor:"#999999", nPaddingTop:0, nPaddingBottom:0, nPaddingLeft:0, nPaddingRight:0, sFlashVars:"offsetLeft=5&offsetTop=0"}));
sIFR.replaceElement(named({sSelector:"h4", sFlashSrc:"sifr/q.swf", sColor:"#454545", sBgColor:"#FFFFFF", sLinkColor:"#99CC00", sHoverColor:"#999999", nPaddingTop:0, nPaddingBottom:0, nPaddingLeft:0, nPaddingRight:0, sFlashVars:"offsetLeft=0&offsetTop=0"}));
sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"sifr/q.swf", sColor:"#99CC00", sBgColor:"#FFFFFF", sLinkColor:"#99CC00", sHoverColor:"#999999", nPaddingTop:0, nPaddingBottom:0, nPaddingLeft:0, nPaddingRight:0, sFlashVars:"offsetLeft=0&offsetTop=0"}));
}
</script>
</body>
</html>
Cada div es una caja (entiendelo así, como bloque o como quieras...) que tiene definida una estructura determinada, por ejemplo que una div esté dentro de otra div, etc, y después tiene sus parámetros definidos mediente css, por ejemplo el color, que tenga un borde u otro, la imágen de fondo, las medidas de ancho y alto, la posición, los márgenes, etc.
la hoja de estilos quedaría así:
Código :
/******************
**** General ***
******************/
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
background:none;
}
/******************
**** FORMA ***
******************/
#header{
width:800px;
height:118px;
padding:0;
background:#EFEFEF url(../img/header.jpg) no-repeat center;
border-top:#666 1px solid;
border-bottom:#666 1px solid;
}
#main{
width:800px;
height:290px;
padding:0;
background:none;
}
#submain_1{
width:540px;
height:290px;
margin:0;
padding:0 0 0 10px;
float:left;
background:none;
}
#submain_2{
width:204px;
height:196px;
margin:0 8px 0 0;
padding:0;
float:right;
background:none;
}
.bar{
width:820px;
padding:0;
}
/*POSICIONES Y DIFERENCIA EN LAS IMAGENES DE FONDO PARA la clase "BAR"*/
.top{
background:#FFFFFF url("../img/bg_top.jpg") no-repeat top;
height:40px;
padding-top:5px;
}
.middle{
background:#FFFFFF url("../img/bg_verde.gif") repeat-x center;
height:15px;
width:800px;
}
.bottom{
background:#FFFFFF url("../img/footer.jpg") no-repeat top;
height:20px;
}
#container{
width:820px;
height:auto;
background:#FFFFFF url("../img/bg_cont.jpg") repeat-y center;
}
#menu{
width:800px;
height:24px;
background:#FFFFFF;
border-bottom:#444444 1px solid;
text-align:right;
padding:0px;
}
#menu ul {
margin:0 10px;
padding:0;
list-style:none;
}
#menu li {
float: right;
position: relative;
}
#menu li a {
display:block;
color: #454545;
text-decoration:none;
width:100px;
height:24px;
text-align:center;
}
#menu li a:hover {
background-position:bottom;
}
#menu li ul {
display:none;
position: absolute;
left:0;
}
#menu li>ul {
top:auto;
left:auto;
}
#menu li:hover ul, li.over ul {
display:block;
}
#tira{
background:transparent url("../img/fondo_main.gif") no-repeat center;
width:140px;
height:140px;
position:absolute;
bottom:0;
right:0;
}
/****************
***POSICIONES***
****************/
.clearing{
clear:both;
}
.float_r{
float:right;
}
.float_l{
float:left;
}
.float_c{
margin:0 auto;
}
.text_r{
text-align:right;
}
.text_j{
text-align:justify;
}
.text_c{
text-align:center;
}
.text_l{
text-align:left;
}
/******************
**** Fuentes ******
******************/
a{
color:#99CC00;
margin:0;
padding:0;
}
a:link{
text-decoration: none;
}
a:visited{
text-decoration: none;
color:#99CC00;
}
a:hover{
text-decoration: none;
color:#BBDD00;
}
a:active{
text-decoration: none;
color:#99CC00;
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #586875;
font-size:11px;
text-indent: 0px;
line-height: 130%;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
text-align :left;
margin:0;
font-size:24px;
padding:0;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
text-align : left;
font-size:17px;
color : #999999;
margin:0;
padding:0;
text-transform:capitalize;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
text-align : left;
font-size:15px;
color : #99CC00;
margin:5px 0 0 0;
padding:0;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
text-align : left;
color : #454545;
margin:0;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
text-align : left;
font-size:10px;
color : #33CC00;
margin:0;
padding:0;
}
h6 {
font-family: Arial, Helvetica, sans-serif;
text-align :center;
font-size:10px;
color : #666666;
margin:0 auto;
padding:auto;
width:200px;
height:20px;
display:block;
}
h6 a{
font-family: Arial, Helvetica, sans-serif;
text-align : right;
font-size:10px;
color : #DDDDDD;
margin:0;
padding:0;
display:inline;
}
h6 a:hover{
color : #954545;
}
hr{
display:none;
}
td{
font-family: Arial, Helvetica, sans-serif;
text-align : center;
background-color:#333333;
color:#CCCCCC;
}
ul,li,ol{
margin:0;
padding:0;
}
#home{
background:#FFF url(../img/home_btn.jpg) no-repeat top;
display:block;
}
#ejemplos{
background:#FFF url(../img/ejemplos_btn.jpg) no-repeat top;
}
#servicios{
background:#FFF url(../img/servicios_btn.jpg) no-repeat top;
}
#perfil{
background:#FFF url(../img/perfil_btn.jpg) no-repeat top;
}
#tarifas{
background:#FFF url(../img/tarifas_btn.jpg) no-repeat top;
}
#contacto{
background:#FFF url(../img/contacto_btn.jpg) no-repeat top;
}
/***********************
***** span´s ********
***********************/
.negro{
color:#666666;
font-size:16px;
}
.none{
display:none;
}
al final queda
asíte dejo unos links:
Tutorial basico de CSSTutorial básico de XHTMLY
otro parecido que empecé a hacer para hecharle una mano a
rodrigo quiñones, no está terminado, ni revisado ni nada, pero igual te puede ayudar, además lo puedes editar algún dia si quieres...
Escrito el 14 Jun 2006 01:52 am
si le cambio el diseño cuando ella va a revisar luego dice que asi no lo hizo y que se lo cambie de vuelta a como lo tenia 
