Logo Lainformacion.com
< Serenity - el weblog oficial
Movable Type Style Generator >

Estilos CSS en tablas

CSS Table Gallery es una colección de distintos atributos CSS para dar estilo a tablas HTML. Los distintos estilos se van aplicando a la tabla que contiene la lista de estilos para ver «en vivo» como quedan cada una de las opciones disponibles. Se puede elegir entre un aspecto tipo iTunes, uno con los colores del Café con leche o uno más clásico, por ejemplo.

(Vía trendalicious!)

12 comentarios

#1 ping Darki

:O muy util ! gracias ;)

#2 ping Neo

Matrix rocks

#3 ping Anonymous

Pero las tablas ya no estaban desfasadas y no se usaban?

#4 ping Kid_A

Excelente, es lo que estaba buscando.

Mil gracias

#5 ping Anonymous

#3 las tablas estan desfasadas para estructurar una web... pero es obvio (como su propio nombre indica) que para presentar informacion en tablas, se siguen usando

#6 ping Scila

¿Como se hace para que tr alternos tengas estilos diferentes? aparte de metiendolo a mano, claro. Me refiero a si existe alguna subclase o algo para la paridad de las tr...

#7 ping inkel

Scila, en CSS3 (si no me equivoco) tienes una pseudo clase "nth-child" (n-avo hijo), por lo que podrias tener algo como:

tr:nth-child(2n+1) { background: #eee }

que serian todos los tr impares (2 * n + 1 siempre es impar). Con lo mismo podrias tener algo como

tr:nth-child(3n) { }

que haria que aquellos tr cuya posicion sea divisible por 3.

Mas info en la especificacion de selectores de CSS3

#8 ping Scila

Muchas gracias inkel, me refería exactamente a eso. En CSS2 nada, no?
Lo más parecido que me suena es :firt-child y :after y :before, pero no se me ocurre como montar una sentencia que funcione, no creo que se pueda.

#9 ping Nacho

no me suena que en CSS2 se pueda. también está la th para la cabecera de la tabla que automáticamente daría un estilo distinto del resto de tr, pero no alternativamente que es lo que preguntabas - la opción de inkel parece bastante buena (si la pruebas Scila no dices!)

#10 ping Scila

Lo he probado y al parecer no lo soporta ni el firefox 1.5 beta. Pero supongo que será correcto, también debería aceptar :nth-child(even) y :nth-child(odd) para par/impar sin necesidad de recurrir al 2n y 2n+1.
Habrá que esperar a futuras versiones de navegador supongo.

#11 ping inkel

En Opera tampoco funciona. Creo recordar que alguna vez lo vi funcionando, pero mi mente podria estar tomandome el pelo.

#12 ping inkel

Nacho: no seria correcto utilizar th. th debe utilizarse para demarcar que el contenido de esa celda corresponde a una cabecera de columna/fila. Si lo utilizas para mostrar datos pierde todo el sentido semantico.

Si, ya se, soy un freak...