CSS dando estilo a nuestras tablas

por | Nov 4, 2009 | CSS, html | 2 Comentarios

Antes había hablado sobre las ventajas de los div sobre las tablas eso en cuanto a maquetar nuestra página web, sin embargo cuando se trata de mostar datos tabulados como por ejemplo la lista de alumnos matriculados, lista de usuarios, etc sin lugar a dudas las tablas son mucho mejores justamente porque fueron creadas para eso, para mostrar datos de forma ordenada.

Se que hay algunos que incluso para esto usan divs pero estos no fueron creados para eso y hay muchas cosas que dan verdaderos dolores de cabeza para hacer con div como por ejemplo que hacer que varias columnas tomen el tamaño de la más grande, algo que es automático en tablas.

Aclarado ese punto vamos al grano

¿Por qué darles estilos?

Si somos programadores puros y duros el diseño de la tabla nos puede importar muy poco sin embargo para nuestros clientes ver un diseño simple y elegante le da limpieza a la página y la hace más amigable, con colores simples se pueden lograr cosas muy interesantes no requerimos ncluir degradados que son más bien contraproducentes ya que afectan la legibilidad.

Aplicando estilos

Imaginemos que tenemos la siguiente tabla

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table border="1" id="mitabla">
<tr>
<th>Titulo 1</th>
<th>Titulo 2</th>
</tr>
</th>
<tbody>
<tr>
<td>Valor</td>
<td>Valor</td>
</tr>
<tr>
<td>Valor</td>
<td>Valor</td>
</tr>
</tbody>
</table>

Y luego aplicamos en nuestra hoja de estilos CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
table#mitabla {
    border-collapse: collapse;
    border: 1px solid #CCC;
    font-size: 12px;
}
 
table#mitabla th {
    font-weight: bold;
    background-color: #E1E1E1;
    padding:5px;
}
 
table#mitabla tbody tr:hover td {
    background-color: #F3F3F3;
}
 
table#mitabla td {
    padding: 5px 10px;
}

Puedes ver aqui el antes y despues

Demo

2 Comentarios

  1. usuario
    usuario el noviembre 8, 2009 a las 11:02 pm

    oye muchisimas gracias me encanto este tutorial,
    ya que yo apesar de todo lo nuevo, que hay hoy en dia sigo utilizando tables en lugar de div. esto lo hago por que soy programador y no maquetador.
    y pues tu sabes que los programadores utilizamos estas tablitas para mostrar registros jiji.