Centrar tabla, horizontal y verticalmente en el browser.

Clicker · #1 (**permalink**) 06/03/2003, 16:29

Hola de nuevo. Existe algún método o código para que una tabla esté centrada en la ventana del browser?? La página que estoy haciendo es una pequeña tabla, nada más, no hay frames, ni nada fuera de la tabla, pero deseo centrar esa tabla tanto horizontal como verticalmente, hasta ahora, solo he podidio hacerlo horizontalmente, pero no he podido centrarla verticalmente, de manera que cualquier persona que accese a la página siempre la vea al centro de la ventana de su browser.

Cómo hago???

Graciela.

emedos · #2 (**permalink**) 06/03/2003, 21:45

mira

haces una tabla de una sola celda, le das al 100 % de ancho y de alto, a esa celda unica le das las propiedades de centrar su contenido tanto vertical como horizontalmente, dentro de esta celda pones tu tabla, o sea una tabla anidada en otra

ejemplo:
http://www.mwmex.com/tablas.htm

Jokin · #3 (**permalink**) 18/07/2003, 01:42

Gracias emedos, sin querer también me has ayudado a mí

Shaka · #4 (**permalink**) 09/06/2004, 14:40

Esto no es compatible con XHTML , alguien conoce como hacerlo pero que sea compatible con XHTML?

umdraiga · #5 (**permalink**) 10/06/2004, 01:35

Gracias emedos
Yo también me he beneficiado de tu consejo
Gracias

Shaka · #6 (**permalink**) 10/06/2004, 05:16

Esto no es compatible con XHTML , alguien conoce como hacerlo pero que sea compatible con XHTML?
Ni siquiera con los esandar de HTML 4.01
Alguien sabe como lograr lo mismo pero que se valide como correcto en la W3C?

Jokin · #7 (**permalink**) 29/08/2006, 11:44

Mira que tiene tiempo este mensaje pero siempre vuelvo a él para recordar cómo se hacía.
Aunque ahora la pregunta de Shaka me parece importante...y como tampoco se cómo hacerlo, agradecería a quien nos dijiese cómo poder colocar una tabla en el centro de la pantalla, independientemente de la resolución o tamaño de la pantalla.

Es posible?

Gracias y un saludo

Colacho · #8 (**permalink**) 03/10/2006, 18:42

Hola, espero que el código que expongo a continuación os solucione el problema. Con este código pueden centrar en la ventana del navegador, imágenes, tablas y todo de lo que tengais ocurrencia.

Primero, identificamos el ancho y el alto de la ventana del navegador y la restamos del ancho de la tabla o del div o de lo que tengais para centrar, esto para hallar el centro del objeto horizontalmente.
Para calcular el centro del objeto verticalmente, pues se utiliza el alto (height).
Pero sin más palabras, el código lo colocamos en una etiqueta SCRIPT en la sección HEAD, así:

<CODE>
function CenterHV(){
TabCentral.style.setExpression('left','document.bo dy.clientWidth/2 - TabCentral.offsetWidth/2');
TabCentral.style.setExpression('top','document.bod y.clientHeight/2 - TabCentral.offsetHeight/2');
document.recalc(true);
}
</CODE>

de aquí, TabCentral es el nombre o el ID que le colocamos a la tabla en el cuerpo del documento HTML (o sea en la sección BODY) para identificarla. CenterHV es el nombre de la función con el cual vamos a centrar utilizando la carga de la página:

<CODE>
<BODY onLoad='CenterHV();'>
</CODE>

y en el cuerpo del documento (sección BODY), colocamos, la tabla, por ejemplo:

<CODE>
<TABLE ID='TabCentral' STYLE='position:absolute;top:0;left:0;' BORDER=4 CELLPADDING=4 CELLSPACING=4 BORDERCOLORDARK='BLACK' BORDERCOLORLIGHT='GRAY'>
<TR BGCOLOR='#6699CC' ALIGN='center'>
<TD STYLE='width:80;'>VERSIÓN</TD>
<TD STYLE='width:80;'>FECHA</TD>
<TD STYLE='width:400;'>DESCRIPCIÓN DE CAMBIOS</TD>
<TD>ELABORÓ</TD>
<TD>REVISÓ</TD>
</TR>
<TR BGCOLOR='#FAFFF4' ALIGN='center'>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
<TD>-
</TD>
</TR>
</TABLE>
</CODE>

Un detalle importante para anotaros es que la posición del objeto debe ser como se especifica en el STYLE del objeto, o sea, position:absolute y top:0, left:0. Aunque podeis hacer algunos cambios y reutilizar la función para obtener otros resultados. Pero lo que quereis creo que es lo que corresponde a lo que expuse. Espero haberle sido de ayuda, y haber sido lo suficientemente explícito para solucionar el problema.

Jokin · #9 (**permalink**) 03/10/2006, 23:55

Saludos:

Gracias Colacho por responder. Miraré con detenimiento el código (no soy muy hábil) y haré las pruebas pertinentes. Cualquier duda la poste.

Mil gracias Colacho

Un saludo