Centrar una tabla en css y otras yerbas...

Snake nS · #1 (**permalink**) 06/06/2005, 20:19

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

SiR.CARAJ0DIDA · #2 (**permalink**) 06/06/2005, 20:43

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?

NoZilop · #3 (**permalink**) 06/06/2005, 20:54

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

Snake nS · #4 (**permalink**) 07/06/2005, 11:19

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?

Durgeoble · #5 (**permalink**) 07/06/2005, 12:42

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.

Snake nS · #6 (**permalink**) 07/06/2005, 21:09

y al archivo css le tengo que especificar uno??

Durgeoble · #7 (**permalink**) 07/06/2005, 23:05

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.

Snake nS · #8 (**permalink**) 15/06/2005, 15:18

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??

webosiris · #9 (**permalink**) 15/06/2005, 15:36

¿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...

Snake nS · #10 (**permalink**) 15/06/2005, 15:59

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.

Durgeoble · #11 (**permalink**) 15/06/2005, 17:17

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.

Snake nS · #12 (**permalink**) 15/06/2005, 18:48

cambie el nombre pero parece que no tiene nada que ver... es otro el error.

Durgeoble · #13 (**permalink**) 15/06/2005, 23:12

table.c1 { width: 779px; padding: 0; border-spacing: 0; border: 0 none; margin: 0; }

Snake nS · #14 (**permalink**) 16/06/2005, 20:25

nada...... no se cual sera el jodido drama..........

Durgeoble · #15 (**permalink**) 16/06/2005, 22:58

pon todo el codigo de la pagina y del css, seguro que es una tonteria.

Sigue los links de la firma.

Snake nS · #16 (**permalink**) 17/06/2005, 12:05

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;
    }

Durgeoble · #17 (**permalink**) 18/06/2005, 02:57

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;
}

Snake nS · #18 (**permalink**) 19/06/2005, 14:53

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..

SiR.CARAJ0DIDA · #19 (**permalink**) 19/06/2005, 19:03

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

Snake nS · #20 (**permalink**) 19/06/2005, 20:46

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.

SiR.CARAJ0DIDA · #21 (**permalink**) 20/06/2005, 07:57

le agregaste 'px' ???

Snake nS · #22 (**permalink**) 20/06/2005, 12:58

sep, realmente no entiendo porque, probe con pt tambien pero nada.

Snake nS · #23 (**permalink**) 22/06/2005, 13:44

Sera porque son tablas en ves de celdas???? tengo que encontrar la forma de suprimir esos pedasos de codigo..