¿Poner en negrita columna en tabla HTML?

[toten88]

Hola, tengo que hacer esta tabla con HTML y CSS:

http://imageshack.us/photo/my-images/836/tablae.gif/


Tengo una duda, yo estoy haciendo una clase en cada CSS para cada columna y luego en cada td lo llamo con el class. En la última columna todos están en negrita, tengo que hacer 2 css iguales pero una con negrita y otra sin? O hay alguna manera de poner que toda la columna se vea en negrita?


http://imageshack.us/photo/my-images/801/dibuix2c.jpg/


Hay una cosa que me sale mal, el tfoot, las celdas de las columnas se alargan hasta que este acaba, ¿porque??

<tfoot>
<tr>
<td>Clasificación al término del 2º Gran Premio</td>
</tr>
</tfoot>

A ver si me podeis echar una mano,
Gracias!

[Naahuel]

Yo haría así, sin clases ni nada:

Código HTML:

<table border="0">
        <thead>
            <tr>
                <th>Encabezado 1</th>
                <th>Encabezado 2</th>
                <th>Encabezado 3</th>
                <th>Encabezado 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
            <tr>
                <td>Contenido 1</td>
                <td>Contenido 2</td>
                <td>Contenido 3</td>
                <td>Contenido 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="4">Contenido del pie</td>
            </tr>
        </tfoot>
    </table>
 

CSS

Código CSS:

table{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    border-spacing: 0;
}
thead, tfoot{
    background: #6A96CC;
}
thead th, tfoot td{
    border-top: 2px solid #6678B1;
    border-bottom: 2px solid #6678B1;
}
thead th{
    color: #79008E;
    font-weight: normal;
}
tfoot td{
    text-align: center;
    color: #FFF;
}
td, th{
    padding: 5px 10px;
}
tbody td{
    color: #6666B5;
}
tbody tr{
    background: #C6F0E3;
}
 
/* poner la última columna en negrita */
tbody tr td:last-child{
    font-weight: bold;
}
 
/* intercalar color de fonto para filas impares */
tbody tr:nth-child(2n+1){
    background: #D5DBF4;
}
 
/* La primera columna es siempre verde y el texto negro */
tbody tr td:first-child{
    background: #C6F0E3;
    color: #000;
}
 

Claro que si querés compatibilidad con navegadores más viejos (aunque la tabla se ve decente) podés usar clases en lugar de esos selectores. Simplemente ponele la clase "primera_columna" a los primeros td's y "ultima_columna" a los últimos. También podés ponerle clases a los tr's para identificar los pares e impares.

Y lo del pie es porque no estás usando colspan. El atributo colspan hace que una celda ocupe varias columnas.

Código HTML:

<tfoot>
    <tr>
        <td colspan="4">Contenido del pie</td>
    </tr>
</tfoot>
 

[toten88]

Muchísimas gracias Naahuel, ahora le hecho un ojo!!

Mil gracias, la verdad que para los que estamos aprendiendo agradecemos un montón la ayuda, y aunque para vosotros parezca una tontería cualquier chorrada de estas me he tirado horas buscando errores absurdos.

Gracias!

Saludos.

[furoya]

Hola toten88 , Naahuel

Una duda, ¿para poner una columna en negrita, que ya tiene todas sus celdas con una clase, no conviene más hacer otra que diga

Código:

.negritas {font-weight: bold; }

y agregarla a las celdas de esa última columna?

Código:

... <td class="clase_original negrita"> ...

O usar columnas, y darle el formato a toda la columna.

Digo, porque tbody tr td:last-child no sé si funciona en todos los navegadores. Aunque va a ser la mejor solución.

[Naahuel]

Si, es exactamente lo que dije en mi comentario :)

[furoya]

Iniciado por Naahuel

Claro que si querés compatibilidad con navegadores más viejos (aunque la tabla se ve decente) podés usar clases en lugar de esos selectores. Simplemente ponele la clase "primera_columna" a los primeros td's y "ultima_columna" a los últimos.

Ah. Perdón. Yo había entendido que recomendabas poner una clase a las primeras y otra a las últimas, donde la mayoría de los selectores estarían repetidos, excepto el de negrita. Como no todo el mundo sabe que se pueden combinar varias clases en un mismo atributo, le dejé el ejemplo que sólo "agrega" el formato bold a las últimas.

Aunque también se podría poner un estilo general a todas las celdas de esa tabla, y nada más "sumarle" el formato de negrita a los de la última columna —ahora sí— con un class="" para cada celda.

O usar colgroup para marcar columnas, como ya dije. Aunque algunos formatos no los acepta .