Problema con centrado de texto en tabla

[yosoloyo]

Buenas
Voy a intentar explicar lo que me pasa lo mas detallado posible para ver si me podeis ayudar.

Yo tenia una web en php con una plantilla diseñada por mi. Digamos que esa plantilla he cambiado su aspecto visual, pero que el contenido de los datos lo quiero conservar, guardando también algunos estilos css que usaba en la plantilla antigüa.

Mi sorpresa ha sido que al pasar de una plantilla a otra, el texto de las tablas que en algunos estilos estaban text-aling: center; han pasado a left y no hay manera de moverlos aunque tenga esa regla así preestablecida. Me pasa también con el vertical-aling que tampoco se me alinea verticalmente y se queda pegado a la parte superior de la celda.

Voy a poner un poco de código haber si ayuda

El CSS que tengo es este:

Código CSS:

.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
    font-family: Arial, Helvetica, Sans-Serif;
}
 
.art-postcontent p
{
    margin: 12px 0 12px 0;
}
 
.art-postcontent p
{
    margin: 12px 0 12px 0;
}
 
.art-postcontent a
{
  text-decoration: none;
  color: #237E90;
}
 
.art-postcontent a:link
{
  text-decoration: none;
  color: #237E90;
}
 
.art-postcontent a:visited, .art-postcontent a.visited
{
 
  color: #324143;
}
 
.art-postcontent  a:hover, .art-postcontent a.hover
{
 
 
  color: #237E90;
}
 
 
.art-postcontent h1
{
   margin: 21px 0 21px 0; 
   color: #237E90;
 
}
 
.art-postcontent h2
{
    color: #237E90;
   margin: 19px 0 19px 0; 
   font-size: 24px;   
}
 
.art-postcontent h3
{
   margin: 19px 0 19px 0; 
  color: #237E90; 
  font-size: 19px;    
}
 
.art-postcontent h4
{
   margin: 20px 0 20px 0; 
   color: #232D2F; 
   font-size: 16px;   
}
 
.art-postcontent h5
{
   margin: 26px 0 26px 0; 
   color: #232D2F;   
   font-size: 13px;
}
 
.art-postcontent h6
{
   margin: 35px 0 35px 0; 
   color: #232D2F;
   font-size: 11px;      
}
 
.art-postcontent blockquote,
.art-postcontent blockquote a,
.art-postcontent blockquote a:link,
.art-postcontent blockquote a:visited,
.art-postcontent blockquote a:hover
{
  color: #0F1415;
 
}
 
.art-postcontent blockquote p
{
   margin: 3px;
}
 
.art-postcontent blockquote
{
   border: solid 0 #C1CFD1;
  margin: 10px 10px 10px 50px;
  padding: 2px 2px 2px 35px;
  background-color: #EDF1F2;
  background-position: left top;
  background-repeat: no-repeat;
  overflow: auto;
}
 
#cabtablaclasi3{ 
    color:#000;
    width:75%;
    text-align: center;
}
 
 
#cabtr{
    clear: both;
    color:#CCC;
    background-color: #009999;
    text-indent:inherit;
    text-align: center;
}
 
#cabposclasi{
    background-color: #99FF99;
    width:50%;
    text-align:center;
}
 
 
#cabnegclasi{
    background-color: #0FF;
    width:50%;
    text-align:center;
}
 
#cabpositiva4{
    width:90%;
    background-color: #FFF;
    text-align:center;
}
 

y aquí va el contenido de la página:

Código PHP:

<div class="art-postcontent">
            echo"<center><table id='cabtablaclasi3'>";
            echo"
            <tr id='cabtr'>
                <td colspan='6'><b><big>CLASIFICACI&Oacute;N GENERAL</b></td>
            </tr>
            <tr id='cabtr'>
                <td><b>1</b></td>
                <td><b>2</b></td>
                <td><b>3</b></td>
                <td><b>4</b></td>
                <td><b>5</b></td>
                <td><b>6</b></td>
            </tr>";
            $cont=1;
    while ($continuar=='s')
     {
       $fila=mysql_fetch_array($consulta);
       if ($fila)
        {
            
            //contrucción de la tabla
            if($cont==1)
            {
                echo"
                <tr id='cabposclasi'>
                    <td><div><b>$1</b></div></td>
                    <td><div><b>$2</b></div></td>
                    <td><div><b>$3</b></div></td>
                    <td><div><b>$4</b></div></td>
                    <td><div><b>$5</b></div></td>
                    <td><div><b>$6</b></div></td>
            </tr>";
            }
            else
            {
                if($cont%2==0)
                {
                    echo"
                    <tr id='cabnegclasi'>
                        <td><div>$1</div></td>
                        <td><div>$2</div></td>
                        <td><div>$3</div></td>
                        <td><div>$4</div></td>
                        <td><div>$5</div></td>
                        <td><div>$6</div></td>
                    </tr>                   
                    ";
                }
                else
                {
                    echo"
                    <tr id='cabpositiva4'>
                        <td><div>$1</div></td>
                        <td><div>$2</div></td>
                        <td><div>$3</div></td>
                        <td><div>$4</div></td>
                        <td><div>$5</div></td>
                        <td><div>$6</div></td>
                    </tr>                   
                    ";
                }
            }
           $cont=$cont+1;
 
        }//fin if
        else
        { $continuar='n';}
     } //fin while
        echo"</table></center>";
 
</div>
 

Ese sería el ejemplo de que no se me alinea centrado el texto dentro de la tabla. Supongo que la solución viene a ser igual si la encuentro para este que para el texto vertical

Gracias de antemano, saludos

[emprear]

@yosoloyo:
cual es el objeto de cosas como esta:

Código HTML:

<tr id='cabpositiva4'>
                        <td><div>$1</div></td>
 

sería más apropiado

Código HTML:

<tr>
                        <td class="cabpositiva4>$1</td>
 

y en el css

Código CSS:

td.cabpositiva4{
text-align: center;
font-weight: bold;
}
 

ó, dado que por lo visto todas tus celdas alinean al centro y no todas van en negrita
en el css

Código CSS:

table#cabtablaclasi3 td{
text-align: center
}
 

y el html

Código HTML:

<tr>
      <td><b>$1</b></td>
 

veo por ahi algunas otras inconsitencias (un clear: both pero ningún float... y alguna otra)
te sugiero que repases tus manuales de css

SAludos

[yosoloyo]

Gracias por tu respuesta

Es que de CSS la verdad que ando un poco flojo por eso digamos que a veces pongo "barbaridades"

En el último ejemplo ... Si pongo en CSS table#cabtablaclasi3 td se aplicará a todas las tablas? o solo a las que ponga table class ="cabtablaclasi3"??

gracias de nuevo

[emprear]

Si pongo en CSS table#cabtablaclasi3 td se aplicará a todas las tablas? o solo a las que ponga table class ="cabtablaclasi3"??

No, se aplicará a todas las celdas de una tabla que tenga por atributo id cabtablaclasi3


y si haces las cosas bien, como los ID no pueden repetirse, es de suponer que no va a haber más tablas con ese ID en tu html, si hubiese más y queres que los estilos para las celdas también se aplicasen, tendrías 2 opciones, o cambiar el id="cabtablaclasi3" por class="cabtablaclasi3", con lo que lo del inicio sería correcto, o agregar nuevos ids para las otras tablas y usar
table#cabtablaclasi3 td, table#cabtablaclasi4 td, table#cabtablaclasi5 td{
/* tus estilos */
}

Y como nunca es tarde para empezar
http://librosweb.es/css/index.html

Saludos

[yosoloyo]

Si lo suponía lo de id y class que venía a fallar por eso. En la anterior plantilla aun teniendo estos fallos iba bien, pero se ve que al pasar a una mejor estructurada falla.
Gracias por los consejos, intentaré corregirlo y ya avisaré si todo va bien. Gracias de nuevo

[yosoloyo]

He convertido los ID en CLASS y sigue pasando lo mismo .... Eso si se lo aplico a toda la fila (al tr) y no a la celda en concreto (td)

[emprear]

Código HTML:

<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
table.cabtablaclasi3 td{
text-align: center;
}
 
table.cabtablaclasi4 td{
text-align: center;
font-weight: bold;
}
 
/*]]>*/
</style>
</head>
<body>
<p>negritas con tag &lt;b&gt;</p>
<table class="cabtablaclasi3" border="1" width="50%">
            <tr>
                <td><b>1</b></td>
                <td><b>2</b></td>
                <td><b>3</b></td>
                <td><b>4</b></td>
                <td><b>5</b></td>
                <td><b>6</b></td>
            </tr>
           </table>
<p>negritas con css</p>
           <table class="cabtablaclasi4" border="1" width="50%">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
           </table>
</body>
</html>
 

No es tan complicado, mirá el ejemplo, en ningun momento le paso nada a las filas, pero si querés podrias hacerlo, de una u otra forma funciona.


Saludos

[yosoloyo]

Te agradezco el ejemplo. Ayer poniendo lo de .estilo td para que se aplicara a los td ya me funcionó tal como tenía yo los estilos en el css.
Gracias de nuevo un saludo