Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/05/2012, 06:10
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 8 meses
Puntos: 192
Respuesta: ¿Poner en negrita columna en tabla HTML?

Yo haría así, sin clases ni nada:
Código HTML:
Ver original
  1. <table border="0">
  2.         <thead>
  3.             <tr>
  4.                 <th>Encabezado 1</th>
  5.                 <th>Encabezado 2</th>
  6.                 <th>Encabezado 3</th>
  7.                 <th>Encabezado 4</th>
  8.             </tr>
  9.         </thead>
  10.         <tbody>
  11.             <tr>
  12.                 <td>Contenido 1</td>
  13.                 <td>Contenido 2</td>
  14.                 <td>Contenido 3</td>
  15.                 <td>Contenido 4</td>
  16.             </tr>
  17.             <tr>
  18.                 <td>Contenido 1</td>
  19.                 <td>Contenido 2</td>
  20.                 <td>Contenido 3</td>
  21.                 <td>Contenido 4</td>
  22.             </tr>
  23.             <tr>
  24.                 <td>Contenido 1</td>
  25.                 <td>Contenido 2</td>
  26.                 <td>Contenido 3</td>
  27.                 <td>Contenido 4</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>Contenido 1</td>
  31.                 <td>Contenido 2</td>
  32.                 <td>Contenido 3</td>
  33.                 <td>Contenido 4</td>
  34.             </tr>
  35.             <tr>
  36.                 <td>Contenido 1</td>
  37.                 <td>Contenido 2</td>
  38.                 <td>Contenido 3</td>
  39.                 <td>Contenido 4</td>
  40.             </tr>
  41.             <tr>
  42.                 <td>Contenido 1</td>
  43.                 <td>Contenido 2</td>
  44.                 <td>Contenido 3</td>
  45.                 <td>Contenido 4</td>
  46.             </tr>
  47.         </tbody>
  48.         <tfoot>
  49.             <tr>
  50.                 <td colspan="4">Contenido del pie</td>
  51.             </tr>
  52.         </tfoot>
  53.     </table>

CSS
Código CSS:
Ver original
  1. table{
  2.     font-family: Helvetica, Arial, sans-serif;
  3.     font-size: 14px;
  4.     border-spacing: 0;
  5. }
  6. thead, tfoot{
  7.     background: #6A96CC;
  8. }
  9. thead th, tfoot td{
  10.     border-top: 2px solid #6678B1;
  11.     border-bottom: 2px solid #6678B1;
  12. }
  13. thead th{
  14.     color: #79008E;
  15.     font-weight: normal;
  16. }
  17. tfoot td{
  18.     text-align: center;
  19.     color: #FFF;
  20. }
  21. td, th{
  22.     padding: 5px 10px;
  23. }
  24. tbody td{
  25.     color: #6666B5;
  26. }
  27. tbody tr{
  28.     background: #C6F0E3;
  29. }
  30.  
  31. /* poner la última columna en negrita */
  32. tbody tr td:last-child{
  33.     font-weight: bold;
  34. }
  35.  
  36. /* intercalar color de fonto para filas impares */
  37. tbody tr:nth-child(2n+1){
  38.     background: #D5DBF4;
  39. }
  40.  
  41. /* La primera columna es siempre verde y el texto negro */
  42. tbody tr td:first-child{
  43.     background: #C6F0E3;
  44.     color: #000;
  45. }


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:
Ver original
  1.     <tr>
  2.         <td colspan="4">Contenido del pie</td>
  3.     </tr>
__________________
nahueljose.com.ar