Centrar Tabla con css

gVenom · #1 (**permalink**) 11/11/2008, 16:33

Saludos amigos.

Es increible que todas las respuestas a esta pregunta que me encontre en este foro fueran viejisimas (2005) y la única que me encontre por ahi que utilizaba un div style, no funciona en firefox. Alguien sabe como centrar una tabla de html con css y que sea compatible con los nuevos parametros del W3C?

Estaba usando un <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
pero me dio fallos con el css. Ideas?

willyfc · #2 (**permalink**) 11/11/2008, 16:54

hola gVenon

lo unico que tienes que poner en tu css es:

Código:

table{margin:0 auto;}

esto afectará a todas las tablas de tu html, ahora si quieres solamente centrar algunas tablas puedes ponerle un div a cada una y por ejemplo pones:

Código:

#contenedor table{margin:0 auto;}
#contenedor2 table{margin:10px 15px 20px 25px;}

y así.

Espero te sirva...Saludos

Aresillo · #3 (**permalink**) 11/11/2008, 17:02

No puedes añadiéndole esta clase a la tabla?

Código:

.tabla{
margin:auto;
width:600px;/*pon el ancho que quieras*/
}

Otra cosa es si lo quieres líquido... ya nos comentas...

Aresillo!!
EDITO: Willy te me has adelantao!

Mikmoro · #4 (**permalink**) 11/11/2008, 17:15

Cita:

Iniciado por gVenom

Es increible que todas las respuestas a esta pregunta que me encontre en este foro fueran viejisimas (2005) y la única que me encontre por ahi que utilizaba un div style, no funciona en firefox. Alguien sabe como centrar una tabla de html con css y que sea compatible con los nuevos parametros del W3C?

Has tenido mala suerte con el buscador (a veces cuesta), porque esto se ha respondido varias veces últimamente. Yo diría que la alternativa que te dan es correcta:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
table.pagina {margin: 0 auto;}
</style>
</head>
<body>
<table width="500" border="1" class="pagina">
<tr>
<td>un texto</td>
<td>Aquí más texto</td>
<td>y un poco más</td>
</tr>
</table>
</body>
</html>

Pero... ¿por qué te refieres al doctype? con el que has puesto, el align en la tabla sigue siendo perfectamente válido para centrarla, ¿no?

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Tabla</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<table width="500" border="1" align="center">
<tr>
<td>un texto</td>
<td>Aquí más texto</td>
<td>y un poco más</td>
</tr>
</table>
</body>
</html>

Null_ · #5 (**permalink**) 11/11/2008, 17:18

para centrar un div lo que hago yo es, además de la definición del doctype, agregarle text-align:center; al body y margin:auto; al div...

suerte

willyfc · #6 (**permalink**) 11/11/2008, 17:21

Cita:

Iniciado por Aresillo

EDITO: Willy te me has adelantao!

jejeje amigo Aresillo me adelante esta vez pero creo que es la primera por que recuerdo que ingresado a otros temas y tu ya habias respondido

Saludos...

gVenom · #7 (**permalink**) 12/11/2008, 08:04

Saludos amigos foreros.

Ya logre centrar la tabla con el código como lo puso Mikmoro, hasta en Opera se ve bien. En lo que se refiere a lo que dijo Mikmoro de:
"Pero... ¿por qué te refieres al doctype? con el que has puesto, el align en la tabla sigue siendo perfectamente válido para centrarla, ¿no?"
la verdad ni me acuerdo porque estuve usando varios Doctype y quizá use otro o era ese la verdad como estuve tratando de varias maneras ya ni sé.

Una cosa más, voy a empezar a practicar usar los famosos "#include" que he leido se usa con PHP o shtml. Pregunta... Ese código CSS funciona si uso un include de una tabla externa, como el header o el bottom?

Ah y gracias a todos por su ayuda.

daPhyre · #8 (**permalink**) 12/11/2008, 10:57

El include de PHP no hace más que jalar un código HTML y meterlo en la página en cuestión; no debe haber problemas de conflictos con el CSS. Suerte

Aresillo · #9 (**permalink**) 12/11/2008, 11:00

si no está de más, en que se basa el "#include"

Aresillo!!

gVenom · #10 (**permalink**) 12/11/2008, 11:17

Ok Gracias compañeros.

daPhyre · #11 (**permalink**) 12/11/2008, 11:28

Cita:

Iniciado por Aresillo

si no está de más, en que se basa el "#include"!

No entiendo bien tu pregunta. ¿Te refieres a como funciona?

Al menos en PHP es así:

Código PHP:

<?php include ('menu.html') ?>

Donde menu.html es un texto donde tienes incluido el menú con sus etiquetas correspondientes...

Mikmoro · #12 (**permalink**) 12/11/2008, 11:34

Lo que significa, Aresillo, es que include es una función de PHP para poder incluir un archivo html en otro, por ejemplo.

Haces un archivo con código html y extensión .php y en lugar de incluir un menú, lo tienes en otro html; ahora, en el archivo php añades el include y el archivo html con el menú se insertará donde lo has pedido.
Tiene una enorme funcionalidad. Busca por include+php y te va a encantar

Aresillo · #13 (**permalink**) 13/11/2008, 01:14

Que flipe no!!!!
Osea que puedo hacer una web e imaginemos que por div pongo un include a un html y después lo guardo en php
Total que si quiero modificar cualquier cosa del diseño sólo tengo que modificar un archivo html!
Si esto es cierto....

Aresillo!!

Mikmoro · #14 (**permalink**) 13/11/2008, 03:21

Así es. Se suele usar para incluir una cabecera que es igual en todas las páginas, un pie, un menú, etc., que efectivamente en caso de modificación habría que cambiar una única vez aunque esté insertado en todas las páginas.

Aresillo · #15 (**permalink**) 13/11/2008, 03:47

He visto la luz!!!

Aresillo!!