Centrar tabla en capa

acrego · #1 (**permalink**) 01/02/2006, 06:38

Buenos días, una pregunta, yo tengo una tabla dentro de una capa, que obtengo de hacer una consulta a una base de datos, el tema es, seguro que es una chorrada, es como puedo centrar esa tabla en esa capa.

hunab · #2 (**permalink**) 01/02/2006, 09:52

pon el ejemplo del código y así será mucho más fácil ayudarte ;)

tomegone · #3 (**permalink**) 03/02/2006, 17:59

Podes ubicar tu tabla dentro de un div al cual le puedes dar las siguientes propiedades:

//ubica esto dentro del head de tu pagina
<style>
#centro {
position: absolute;
margin-left: 200px; //varia esta propiedad hasta que tu tabla quede centrada
}
</style>

//ahora ubica esto en el body
<div id="centro">
//ubica aqui los datos de tu tabla
</div>

levhita · #4 (**permalink**) 03/02/2006, 20:24

Tambien puedes darle la propiedad "position:relative;" al elemento padre(el contenedor), y asignarle al elemento hijo "margin:auto;"(la tabla).

Para que funcione el elemento padre debe de tener un ancho definido (100%, 400px, etc..)

Tambien puedes carlar dandole al elemento padre "text-align:center;".

levhita · #5 (**permalink**) 03/02/2006, 20:33

oh sí, tambien depende del tipo de documento, de preferencia debe de tener una header para que el navegador entre en modo estricto y funcionen todos y cada uno de los trucos del css.

yo hice las pruebas con un documento con esta cabecera:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

En el momento en el que quito esta cabecera el navegador entra en modo-quirk y manda al demonio el margin:auto;

más info acerca de modo estricto y quirk: http://www.quirksmode.org/css/quirksmode.html

acrego · #6 (**permalink**) 10/02/2006, 07:08

Aun no soy capaz de centrar la dichosa tabla en la capa, les pongo el código por si alguno sabe como hacerlo:

Código:

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	margin:0px;
	background:url(/Rediseño/imagenes/bg2.gif);
}
#Contenedor{
	position:relative;
	margin: 0 -1px;
	width: 776px;
	border: solid 1px #0a9de6;
	margin
-left: auto;
	margin-right: auto;}

#cabecera {
	background-color:#FFFFFF;
	position: relative;
	z-index: 13;
	width: 100% }

#sesion{	
	width:100%;
	padding:3px 0px 3px 0px;
	background-color:#FED966;
	text-align:right;
}

#Contenedor .pagina {
	background-color:#FFFFE0;
	width: auto;
	border-left: 150px solid #99cdff }



.ContenedorCentral {
	margin: 0;
	width: 100% }

.Navegador, .Cuerpo, .oculta {
	position: relative;
	float: left }

.Navegador {
	margin-right: 1px }

.Cuerpo {
	margin: 0 -3px 0 -2px }

/*.oculta {
	margin-left: 1px }*/

#Contenedor .Navegador {
	margin-left: -150px;
	z-index: 10;
	width: 150px }

#Contenedor .Cuerpo {
	z-index: 20;
	width: 100% }
/*tablas*/
#cuerpotabla{
	position: relative;
	align:center;
}

table, th, td {
	border: 1px solid #D4E0EE;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #555;
	text-align:left;
	
}

caption {
	font-size: 150%;
	font-weight: bold;
	margin: 5px;
}

td, th {
	padding: 4px;
}

thead th {
	text-align: center;
	background: #E6EDF5;
	color: #4F76A3;
	font-size: 100% !important;
}

tbody th {
	font-weight: bold;
}

tbody tr { background: #FCFDFE; }

tbody tr.odd { background: #F7F9FC; }

table a:link {
	color: #718ABE;
	text-decoration: none;
}

table a:visited {
	color: #718ABE;
	text-decoration: none;
}

table a:hover {
	color: #718ABE;
	text-decoration: underline !important;
}

tfoot th, tfoot td {
	font-size: 85%;
}

el ancho de la tabla me varia dependiendo de la consulta que haga a la base de datos, y lo que quiero es que sea un poco automático, que me centre siempre la tabla.
alguno se le ocurre algo??
un saludo