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
[cc lang=»html»]
| Titulo 1 | Titulo 2 |
|---|---|
| Valor | Valor |
| Valor | Valor |
[/cc]
Y luego aplicamos en nuestra hoja de estilos CSS
[cc lang=»css»]
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;
}
[/cc]
Puedes ver aqui el antes y despues
