¿Como ajustar una pagina a su contenido?

[willy]

No sé como conseguir ajustar el tamaño de la página con su contenido. Es decir que no sobre espacio por los lados y que la página se ajuste a lo que hay en su interior.

Os pongo un ejemplo. Si podéis abrir el enlace de mi página http://www.arteabuenprecio.com/tablaprecios.htm
Veréis que por los lados hay mucho espacio de color amarillo. Me gustaría poder ajustar su contenido en la ventana para no ocupar tanto espacio.

Gracias por vuestra ayuda

Willy

[manmanu]

Hola, tienes algunas cosillas que debes mirar te lo comento más abajo, pero contestando a tus dudas, igual te ayuda mi comentario;
si quieres que ocupen todo el contenido, deberas trabajar con porcentajes.
Igual mejor que una explicación, pudiera ser que lo entiendas mejor si lo prácticas,

Ejemplo;
tu tienes;
CSS-->#global {background-color: #CFEEE3;width: 700px ;margin:50px auto; }
HTML--><table width="700px" border="1px" cellspacing="5px" cellpadding="5px">
Global es la capa principal entre todas, y le dices que tenga un ancho de 700 pixeles, y coinciden las medidas que le indicas a tu tabla que está dentro de la capa global;
también 700 pixeles....
Bien...primero para que tu tabla ocupe el 100x100 del interior de Global, se lo debes indicar ( width=100%").
Ahora como "Global" tiene una medida fija 700px, pero creo entender que quieres que ocupe en este ejemplo toda la pantalla(creo entender eso),
pues dile a "global" que crezca hasta el 100%.... (width:100%).
En tu tipo de documento, xhtml1-strict.dtd está permitido, y te validará.

Pero práctica, quita el valor a uno, y se lo das a otro y viceversa....entenderás cosas.

Pero prueba con esto a ver si mejora.
#global {background-color: #CFEEE3;width:100% ;margin:50px auto; }
<table width="100%" border="1px" cellspacing="5px" cellpadding="5px">
Recuerda que ---> (margin:50px auto;) separa tu tabla del tope de arriba.....

Consejo, tu tienes;
CSS;
td.a1{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em;}
td.a2{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em}
td.a3{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em}
td.a4{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em}
td.a5{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em;}
td.a6{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em}

Podrías reducirlo a;
.a1,.a2,.a3,.a4,.a5,.a6{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em;}
Funciona igual....
td.a1,td.a2,td.a3,td.a4,td.a5,td.a6{background-color: #2B8275;width:70px; font-style: italic;color:white;letter-spacing: 1px; font-size: 0.9em;

Puedes probar a dar a "td" un ancho de 20%, como tienes 5 columnas...prueba....teniendo en cuenta los bordes, no lo he mirado.


Luego tienes algunos errores en CSS;
td.d6{ ;font-weight:bold;background-color: #A1D5C2}


saludos
suerte.....
manmanu