Foros del Web » Creando para Internet » CSS »

Centrar una tabla en css y otras yerbas...

Estas en el tema de Centrar una tabla en css y otras yerbas... en el foro de CSS en Foros del Web. Quiero saber como pocicionar una tabla, (izquierda,derecha,centro), utilise: margin-left:auto margin-rigth:auto pero no aparece centrada.. Y otra cosita, cuales serian las etiquetas en css que definen ...
  #1 (permalink)  
Antiguo 06/06/2005, 21:19
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Centrar una tabla en css y otras yerbas...

Quiero saber como pocicionar una tabla, (izquierda,derecha,centro), utilise:

margin-left:auto
margin-rigth:auto

pero no aparece centrada..

Y otra cosita, cuales serian las etiquetas en css que definen las propiedades de estas en html:

cellpadding
cellspacing
border

Salu2
  #2 (permalink)  
Antiguo 06/06/2005, 21:43
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
escribiste mal RIGHT...
y solo se centran con doctype estricto:

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

cellpadding = TD { padding:4px }
cellspacing = TABLE { border-spacing:2px }
border = TABLE, TD {border: 1 px solid #000000 }


Ahora, yo probe poner 4 capas, 1 al lado de la otra con "display:inline" y solo usando CSS, con doctype transisional se ve perfecto pero con doctype estricto se ve CUALQUIER COSA, alguien sabe porque pasa esto?
  #3 (permalink)  
Antiguo 06/06/2005, 21:54
 
Fecha de Ingreso: mayo-2005
Ubicación: Lima
Mensajes: 160
Antigüedad: 12 años, 6 meses
Puntos: 0
Si no le has puesto, cada linea debe terminar con ";", en el caso del centrado, da igual colocar margin:auto; solo afecta al centrado horiizontal.
padding-top padding-right padding-bottom padding-left o simplemente padding
border-spacing
border-style border-width border-color ...

El css no esta bien implementado en explorer.... sale cualquier cosa

Última edición por NoZilop; 06/06/2005 a las 22:03
  #4 (permalink)  
Antiguo 07/06/2005, 12:19
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Cuantos doctypes puedo especificar?? en el archivo css tengo que poner el correspondiente al mismo? o solo en el html?

por ejemplo este es mi doctype:

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ya que le puse compatibilidad con xhtml.

Cual es la funcion de esto? validar el codigo?
  #5 (permalink)  
Antiguo 07/06/2005, 13:42
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
la funcion del doctype es indicarle al navegador que version del leguage (y que lenguage) estas usando, dependiendo de cual sea lo interpretara de una u otra forma (segun la implementacion de esa version)
Una pagina no sera compatible con Xhtml solo por que lo ponga en el doctype, de echo puede estar totalmente mal por ponerle dicho doctype y no realizar los ajustes necesarios para cumplir con el (cerrar todas las etiquetas, cerrar etiquetas unicas pe:<br />, ect)
El doctype es informacion, necesaria por otro lado si queremos que todo funcione, no hace nada por si solo y, en caso de no saber que se esta haciendo se puede hacer una pagina perfecta en html 4.0 y no encontrar jamas el fallo de que en el doctype pone xhtml 1.1 strict.
Tenerlo en cuenta, no se puede cambiar el doctype a la ligera porque lo puede descuadrar todo.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #6 (permalink)  
Antiguo 07/06/2005, 22:09
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
y al archivo css le tengo que especificar uno??
  #7 (permalink)  
Antiguo 08/06/2005, 00:05
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
no, el archivo css no precisa que se le indique nada, eso se indica en el link desde el que se llama o bien en la etiqueta que contiene los estilos, mira mi firma, quizas encuentres algo interesante.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #8 (permalink)  
Antiguo 15/06/2005, 16:18
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Código:
 <td valign="top"><table width="779" class="tabla-arriba1-2">
Código:
    .tabla-arriba1-2 {
    border-spacing:0pt;
    padding:0pt;
    border-style:0pt;
    }
Que estoy haciendo mal??
  #9 (permalink)  
Antiguo 15/06/2005, 16:36
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
¿estas intentando poner una tabla dentro de una celda de otra tabla (tenés 2 tablas)? Si no es así el código html esta mal...
  #10 (permalink)  
Antiguo 15/06/2005, 16:59
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
esa tabla contiene a dos celdas, lo que quiero es suprimir este codigo:

Código:
    <td valign="top"><table width="779" border="0" cellspacing="0" cellpadding="0">
Para ahorrar ancho de banda, pero se visualisa como si no especificara ningun valor.
  #11 (permalink)  
Antiguo 15/06/2005, 18:17
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
Prueba a poner un nombre menos estrambotico, muchos navegadores se llevan mal con nombres de reglas que parecen contraseñas (mayusculas, minusculas y simbolos en el mismo nombre) es aconsejable usar solo letras minusculas para tal menester.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #12 (permalink)  
Antiguo 15/06/2005, 19:48
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
cambie el nombre pero parece que no tiene nada que ver... es otro el error.
  #13 (permalink)  
Antiguo 16/06/2005, 00:12
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
table.c1 { width: 779px; padding: 0; border-spacing: 0; border: 0 none; margin: 0; }
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #14 (permalink)  
Antiguo 16/06/2005, 21:25
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
nada...... no se cual sera el jodido drama..........
  #15 (permalink)  
Antiguo 16/06/2005, 23:58
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
pon todo el codigo de la pagina y del css, seguro que es una tonteria.

Sigue los links de la firma.
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #16 (permalink)  
Antiguo 17/06/2005, 13:05
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" class="pagina">
  <tr>
    <td valign="top"><table width="779" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="arriba1"><img src="../Images/transparente.gif" width="25" height="15" /></td>
      </tr>
      <tr>
        <td class="arriba2"></td>
      </tr>
    </table>
      <table width="779" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="menuhorisontal"></td>
          <td class="menuhorisontalcuadradito"></td>
          <td class="horisontal2"></td>
        </tr>
      </table>      
      <table width="779" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="arriba3"><img src="../Images/spacer.gif" width="1" height="1" /></td>
        </tr>
      </table>      
      <table border="0" cellpadding="0" cellspacing="0" class="tablacontiene">
        <tr>
          <td height="19" class="nacemenu"><img src="../Images/transparente.gif" width="1" height="19" /></td>
          <td class="barratemas"><img src="../Images/transparente.gif" width="25" height="15" /></td>
        </tr>
      </table>      
      <table border="0" cellpadding="0" cellspacing="0" class="tablacontiene2">
        <tr>
          <td class="menulateral"></td>
          <td valign="top" class="celdacontenido">&nbsp;</td>
        </tr>
      </table>      
      <table width="779" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td class="piedepagina"></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>
Código:
    body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #CCCCCC;
	}
	/* Tabla Contenedora del sitio*/
    .pagina {
	margin:auto;
    width:779px;
    }
    /* Cabesera*/
	.arriba1 {
	background-image: url(../Images/design_01.gif);
    }
    .arriba2 {
	background-image: url(../Images/design_02.gif);
	height:59px;
    }
	/* Menu Horisontal*/
    .menuhorisontal {
	background-image: url(../Images/Design2-remix_02.gif);
	width:122px;
	height:24px;
    }
    .menuhorisontalcuadradito {
	background-image: url(../Images/Design2-remix_03.gif);
	width:17px;
    }
    .horisontal2 {
	background-image: url(../Images/Desing2-remix_04.gif);
	width:638px;
    }
	/* Debajo de menu horisontal*/
    .arriba3 {
	background-image: url(../Images/design_12.gif);
	height:9px;
    }
	/* La siguiente tabla contiene a las celdas "nacemenu" y "barratemas"*/
	.tablacontiene {
    width:779px;
	height:19px;
    }
    .nacemenu {
	background-image: url(../Images/design-2_02.gif);
	width:140px;
	height:19px;
	}
    .barratemas {
	background-image: url(../Images/barra-temas.gif);
    }
	/* La siguiente tabla contiene a las celdas "menulateral" y "celdacontenido"*/
	.tablacontiene2 {
	width:779px;
	height:447px;
    }
    .menulateral {
	background-image: url(../Images/design-2_04.gif);
	width:140px;
	height:447px;
    }
    /* Celda de contenido principal*/
    .celdacontenido {
	background-color: #A3A3A3;
    /* Pie de pagina - Footer*/
    }
    .piedepagina {
	background-image: url(../Images/design_18.gif);
	width:779px;
	height:27px;
    }
    .tabla-arriba1-2 {
    border-spacing:0;
    padding:0;
    border-style:0;
    }
  #17 (permalink)  
Antiguo 18/06/2005, 03:57
Avatar de Durgeoble  
Fecha de Ingreso: marzo-2003
Mensajes: 462
Antigüedad: 14 años, 9 meses
Puntos: 2
para aplicar estilos a tabla, arriba1 y arriba2 no es asi .tabla-arriba1-2 sino asi:
.tabla, arriba1, arriba2
para quitar width="779" border="0" cellspacing="0" cellpadding="0" cambialo por class="tabla" (por ejemplo)
.tabla {
width: 779px;
padding: 0;
border: 0 none;
margin: 0;
border-spacing: 0;
}
__________________
Todas mis respuestas funcionaran correctamente en aquellos navegadores que respeten los estandares.
  #18 (permalink)  
Antiguo 19/06/2005, 15:53
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Cita:
para aplicar estilos a tabla, arriba1 y arriba2 no es asi .tabla-arriba1-2 sino asi:
.tabla, arriba1, arriba2
La llamo arriba1-2 porque contiene esas dos celdas
Igualmente gracias por el dato.

Cita:
para quitar width="779" border="0" cellspacing="0" cellpadding="0" cambialo por class="tabla" (por ejemplo)
.tabla {
width: 779px;
padding: 0;
border: 0 none;
margin: 0;
border-spacing: 0;
}
No se porque pero no funciona, se sigue visualisando mal...

Código:
    .tablaprueva {
    width: 779px;
    padding: 0;
    border: 0 none;
    margin: 0;
    border-spacing: 0;
    }
Código:
<table class="tablaprueva">
No se cual puede ser la explicacion..
  #19 (permalink)  
Antiguo 19/06/2005, 20:03
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
la tabla no tiene padding, ese atributo es de las celdas..

si no hay borde tenes q poner 0px y nada mas, lo mismo para el margen, pero no podes omitir el 'px'

te faltaria la propiedad border-collapse, aunque por default ya viene en 'collapse', eso junta los bordes de las celdas, si queres separarlas usas border-collapse:separate;

pd: prueba es con B
  #20 (permalink)  
Antiguo 19/06/2005, 21:46
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
el unico atributo que hace efecto sobre la tabla es margin.

border y cellspacing son los que no puedo conseguir suprimir dentro del archivo html.
  #21 (permalink)  
Antiguo 20/06/2005, 08:57
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
le agregaste 'px' ???
  #22 (permalink)  
Antiguo 20/06/2005, 13:58
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
sep, realmente no entiendo porque, probe con pt tambien pero nada.
  #23 (permalink)  
Antiguo 22/06/2005, 14:44
 
Fecha de Ingreso: diciembre-2004
Ubicación: Cordoba - Argentina
Mensajes: 503
Antigüedad: 13 años
Puntos: 1
Sera porque son tablas en ves de celdas???? tengo que encontrar la forma de suprimir esos pedasos de codigo..
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 09:19.