Foros del Web » Creando para Internet » CSS »

Centrar tabla con CSS

Estas en el tema de Centrar tabla con CSS en el foro de CSS en Foros del Web. A las buenas.... A ver... el atributo align en el tag table coloca la tabla centrada ok? (no el contenido) Vale. Ahora quiero hacerlo mediante ...
  #1 (permalink)  
Antiguo 27/12/2003, 11:20
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Información Centrar tabla con CSS

A las buenas....


A ver... el atributo align en el tag table coloca la tabla centrada ok? (no el contenido)

Vale. Ahora quiero hacerlo mediante CSS.

¿cómo #!?%@!!= [] &&¨{ } se le indica lo mismo desde una hoja de estilos??


No me vale lo de text-align que yá me he hinchao a ponerlo y sólo sirve en explorer pero no en el resto.

Ni siquiera si le meto delante un <div class="centro"> (teniendo .centro{text-align: center} funciona.

¡¡¡¡¡¡no se centran las tablas en css o qué????




p.d. me tenía que haber dedicado a la botánica.... estaría menos estresada
  #2 (permalink)  
Antiguo 27/12/2003, 12:01
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola, tunait.

No se si será esto a lo que te refieres, pero por si acaso ahí va:

<div style="text-align:center;width:100%">
<table>
...

Ya contarás que tal te ha ido. Saludos y Feliz Año.
  #3 (permalink)  
Antiguo 27/12/2003, 12:12
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Hola Javier

Nop, eso yá lo he probado, sólo furula en explorer.... no sé por qué NS no centra las tablas ni siquiera cuando están dentro de un div con un text-align al centro

Ahí está el tema, que yo tán felíz mirándolo en explorer hasta que lo miro en el otro y resulta que no hace caso (mozilla, of course, tampoco)

Como precisamente son NS y mozilla los que sí se ciñen a las especificaciones CSS por eso pregunto, cuál es la forma "oficial" de hacer esto

gracias Javier, felíz año guevo pa tí también
  #4 (permalink)  
Antiguo 27/12/2003, 12:24
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola Tunait y JavierB :

Creo que JavierB te quiso mostrar lo de "width: 100%"...

A mi me había pasado algo parecido, y conseguí centrar (no recuerdo qué) poniendo eso del width.

Saludos y felicidades
  #5 (permalink)  
Antiguo 27/12/2003, 12:30
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Hola Caricatos

hum... buena idea lo de la anchura al 100%....


pero tampoco funciona

Tiene que haber alguna forma


thanks...
  #6 (permalink)  
Antiguo 27/12/2003, 12:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

La celda está también al 100%... ... has probado ponerle un borde para ver la distribución...

Con este código veo el contenido centrado (explorer y mozilla)

Código PHP:
<div align=center width=100%>
<
table style="width:50%" border=1>
    <
tr>
        <
td style="text-align: center; width: 100%">
            
Hola
        
</td>
    </
tr>
</
table>
</
div
Si no te sirve, puedes ponernos un enlace para ver como lo tienes (o el trozo de código).

Saludetes
  #7 (permalink)  
Antiguo 27/12/2003, 13:08
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola tunait y caricatos.

Tienes razón tunait, el NS se pasa mi código por... Bueno te dejo esta página a ver si le sacas algo de probecho.

http://www.tierradenomadas.com/tw003.phtml#a

Saludos,
  #8 (permalink)  
Antiguo 27/12/2003, 13:22
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Caricatos

tienes razón, el código que dejaste funciona ok en mozilla peeeero.... no funciona desde una hoja de estilos:

Fíjate que esto no funciona

Código:
<style type="text/css">
#centra {
	align: center;
}
</style>



<div id="centra" width=100%>
<table style="width:50%" border=1>
    <tr>
        <td style="text-align: center; width: 100%">
            Hola
        </td>
    </tr>
</table>
</div>


Sabes qué pasa... que el atributo align está desaprobado por la w3c, incluso en el tag div.

Y el atributo style, también está desaprobado.

El sitio inicialmente estaba con un align normal y corriente en table, que funciona de coña. Pero es que estoy re-escribiendo todo el código de acuerdo a xhtml 1.1, por eso busco la forma de centrar las tablas y no hay forma....

Si se te ocurre otra idea....


Javier

Cita:
el NS se pasa mi código por...
....donde no pasa el viento???

Gracias por el enlace, es de mis favoritos, pero desgraciadamente no me sirve para las tablas, salvo que las meta dentro de una capa de posición absoluta. El centrado con márgenes sólo sirve en capas de posición absoluta, y necesito que ocupe su espacio dentro del flujo del documento.


buaaaaaahhhhhhh

estoy abierta a más sugerencias

Última edición por tunait; 27/12/2003 a las 13:24
  #9 (permalink)  
Antiguo 27/12/2003, 17:05
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
<coros de aleluyah> Eureka!!! </coros>

Lo encontré!! si a cabezona no me gana nadie ....

Lo que pasa que ahora no anda en explorer, pero con un parche se ha solucionado y no he tenido que volver a abrir los tropecientosmil documentos pa añadir ná

Bueno, pues pa alinear una pajolera tabla desde una hoja de estilos hay que pedirle:


margin-left: auto;
margin-right: auto


poldió me siento agotada.....

JavierB, Caricatos... mil gracias por echarme una mano
  #10 (permalink)  
Antiguo 27/12/2003, 17:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284
Hola otra vez:

Lo que me ha funcionado, para centrar la tabla es con display: inline (aunque no sé que tendrá que ver... )... Pero el borde se vé fatal...

Espero que al menos sirva para avanzar un poco en la resolución...

Por cierto... el estilo align no lo conocía (pensaba que solo había text-align), o hay elementos que se pueden alinear así. ¿?

Felicidades
  #11 (permalink)  
Antiguo 27/12/2003, 17:14
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 21 años, 11 meses
Puntos: 1284


Otro choque... ¡cómo en los viejos tiempos!...

Me alegro de que te funcionase...

Saludetes
  #12 (permalink)  
Antiguo 27/12/2003, 17:20
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Juás, sip, hemos llegado al mismo tiempo, parece

Cita:
el estilo align no lo conocía
en realidad se me escapó al pegarlo. Es que explorer lo acepta (al menos el mío, que es a pedales) y puestos a probar todo tipo de combinaciones pobré a sacarle el text- y así se quedó, pero en realidad es text-align.

Aunque desconozco si existe el atributo align en css, yo creo que no.... pero no lo puedo asegurar, el tema es tán amplio que no doy abasto pa estar al corriente de todo

  #13 (permalink)  
Antiguo 28/12/2003, 05:06
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Bien por tunait.

Ahora un par de cosillas, por incordiar un poco:

- Con margin-left:auto;margin-right:auto has conseguido que se centre en NS ¿Como lo has hecho con el Explorer?

- Con ese código he podido centrar una tabla, pero no me ha funcionado con una imágen ¿Alguien sabe porqué?

Saludos a todos.
  #14 (permalink)  
Antiguo 28/12/2003, 10:06
 
Fecha de Ingreso: agosto-2003
Mensajes: 16
Antigüedad: 20 años, 7 meses
Puntos: 0
Los elementos de bloque como una tabla se centran en CSS con margin-right:auto; y margin-left:auto;

Pero IExplorer implementa horriblemente CSS y eso no funciona, con lo cual hay que usar un error en su implementación de css para centrar una tabla y aplicar el atributo text-align:center; al contenedor de esa tabla (como habeis comprobado es un error de interpretación CSS del explorer y en el resto de navegadores no centra la tabla)

Código PHP:

/*CSS*/

.necesario_pa_el_puto_Iexplorer /*sólo para explorer*/
text-align:center;
}
body>html .necesario_pa_el_puto_Iexplorer /* para navegadores que cumplan CSS2*/
text-align:left;
}

table.centrada {
margin-right:auto;
margin-left:auto;
}

table.centrada td {
text-align:left/* para que no hereden las celdas en Iexplorer el centrado del texto*/
}

/*HTML*/

<div class="necesario_pa_el_ puto_Iexplorer>
<table class="
centrada"  width="50%" border=1>
<tr>
<td> hola </td>
<td>hola2 </td>
</tr>
</table>
</div> 
Por cierto para centrar una imagen debería funcionar igual que para centrar una tabla si no recuerdo mal

Última edición por terminux; 28/12/2003 a las 10:08
  #15 (permalink)  
Antiguo 28/12/2003, 14:51
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Gracias terminux.

Después de leer tu mensaje encontré una solución parecida en el enlace que le puse a tunait Voy a escribir 1.000 veces "Prometo leer más atentamente las páginas que recomiende" (ni que decir tiene que usaré copy&paste )

Saludos,
  #16 (permalink)  
Antiguo 29/12/2003, 06:12
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola de nuevo.

Yo sigo con mi tema o sea centrar una imágen en NS. Para una tabla pongo esto:

<table width="75%" border="1" style="margin-left:auto;margin-right:auto">

Y la centra sin problema. Pero intento hacer lo mismo con una imágen...

<img src="imagen1.gif" width="88" height="31" style="margin-left:auto;margin-right:auto">

y pasa de mí olimpicamente. Solo lo he conseguido poniendole dentro de un <div> y dandole el estilo.

¿Sabeis de alguna otra forma?

Gracias y Feliz Año.

Última edición por JavierB; 29/12/2003 a las 06:13
  #17 (permalink)  
Antiguo 29/12/2003, 06:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Hola Javier

las imágenes nunca han tenido una propiedad de centrado, siempre han dependido de una alineación de párrafo o de celda , no así las tablas, que sí tienen su manera propia tanto en html como en css.

Dudo que exista la forma, de todas maneras investigaré un poquito a ver si existe la forma de centrar una imagen sin usar un alineamiento de párrafo.

por cierto que yá tengo colgados los cambios, los hice al sitio de mi perfil (por si le quieres echar un ojo). Al final validé como xhtml 1.0, que aún tolera los iframes. De momento no puedo prescindir de ellos... no les encuentro alternativa de momento.... habré de enterarme de cómo funcionan los xframes esos si alguien sabe algo, me lo cuente por favor
  #18 (permalink)  
Antiguo 29/12/2003, 17:33
 
Fecha de Ingreso: agosto-2003
Mensajes: 16
Antigüedad: 20 años, 7 meses
Puntos: 0
JavierB añadele a la imagen la propiedad display:block; y te lo centrará, el siguiente ejemplo en funciona:

Código PHP:
<html>
<
head> <title></title></head>
<
body>

<
div style="text-align: center;">
<
img style="margin-left: auto; margin-right:auto; display: block;" 
src="addpoll.gif" title="" alt="">

</
div>

</
body>

</
html
el div con text-align:center sólo es necesario para Iexplorer

Última edición por terminux; 29/12/2003 a las 17:42
  #19 (permalink)  
Antiguo 30/12/2003, 02:50
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Muchas gracias terminux.

Otra cosa más que tengo que anotarme. Dentro de poco tendré que cambiar de libreta

Saludos y Feliz Año a todos.
  #20 (permalink)  
Antiguo 25/01/2005, 16:13
 
Fecha de Ingreso: enero-2005
Mensajes: 2
Antigüedad: 19 años, 2 meses
Puntos: 0
Centrar una imágen

Creo que no es tan necesaria la etiqueta Div para este ejemplo. Para mi gusto está de más y sin ella jala muy bien el ejemplo propuesto. Por lo menos yo lo he probado en Netscape, Iexplorer, Opera, Firefox y Safari. Si ademas, estas metiendo tu imágen adentro de una celda de tabla, no es necesaria la propiedad display: block. Basta con ponerle de estilo a la celda text-align: center;
  #21 (permalink)  
Antiguo 25/01/2005, 19:39
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 20 años, 7 meses
Puntos: 1
Habiais olvidado usar una DTD correcta :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

o

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Con una DTD entera, IE funciona mejor y comprende margin-left:auto; y margin-right:auto;. Trabajar en modo quirks (sin DTD) es complicarse el trabajo :)
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #22 (permalink)  
Antiguo 26/01/2005, 11:06
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Hola gizmo_marco Bienvenido al foro.

Es cierto que el <div> no es necesario. El mensaje empezó centrando una tabla, terminó centrando una imágen y en su momento no se me/nos ocurrió otra forma de lograrlo.

PascalC: totalmente de acuerdo contigo. Pero date cuenta de que este mensaje tiene más de 1 año de antigüedad. Antes no se hablaba tanto en este foro sobre los doctype, yo desde luego no tenía ni idea de que era eso. Ahora que ya se algo más procuro usarlo

Saludos,

Última edición por JavierB; 26/01/2005 a las 11:31
  #23 (permalink)  
Antiguo 26/01/2005, 11:11
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 20 años, 7 meses
Puntos: 1
buff ! no habia visto la fecha del mensaje inicial :)
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #24 (permalink)  
Antiguo 07/02/2005, 06:22
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 19 años, 7 meses
Puntos: 0
Usando el buscador de FDW para encontrar información sobre centralización de capas, me encontré por casualidad con este post.

Igual que tunait, también estuve matándome tratando de centrar una tabla usando CSS y evitando el atributo align en el tag table.

Den entre todas las respuesta, probé con lo que dijo terminux:

Cita:
Los elementos de bloque como una tabla se centran en CSS con margin-right:auto; y margin-left:auto;

Pero IExplorer implementa horriblemente CSS y eso no funciona, con lo cual hay que usar un error en su implementación de css para centrar una tabla y aplicar el atributo text-align:center; al contenedor de esa tabla (como habeis comprobado es un error de interpretación CSS del explorer y en el resto de navegadores no centra la tabla)


Código:
/*CSS*/

.necesario_pa_el_puto_Iexplorer { /*sólo para explorer*/
text-align:center;
}
body>html .necesario_pa_el_puto_Iexplorer { /* para navegadores que cumplan CSS2*/
text-align:left;
}

table.centrada {
margin-right:auto;
margin-left:auto;
}

table.centrada td {
text-align:left; /* para que no hereden las celdas en Iexplorer el centrado del texto*/
}

/*HTML*/

<div class="necesario_pa_el_ puto_Iexplorer>
<table class="centrada" width="50%" border=1>
<tr>
<td> hola </td>
<td>hola2 </td>
</tr>
</table>
</div>
Ok, esto funciona perfecto, pero… me queda una duda…

tunait… tu decias:

Cita:
coros de aleluyah> Eureka!!! </coros>

Lo encontré!! si a cabezona no me gana nadie ....

Lo que pasa que ahora no anda en explorer, pero con un parche se ha solucionado y no he tenido que volver a abrir los tropecientosmil documentos pa añadir ná

Bueno, pues pa alinear una pajolera tabla desde una hoja de estilos hay que pedirle:


margin-left: auto;
margin-right: auto
Ahora, a qué parche te referías?
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #25 (permalink)  
Antiguo 07/02/2005, 07:45
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 20 años, 7 meses
Puntos: 1
Supongo que se referia a poner una DTD, lo que no es un parche sino algo teoricamente obligatorio ;)
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:00.