SummArg | Cursos y recursos para webmasters

21/10/2011

Tablas con esquinas redondeadas en CSS3

La gente de Red Team Design compartió un método muy bueno para lograr tablas con bordes redondeados sin necesidad de utilizar imágenes, con un poco de jQuery para lograr el efecto Zebra (filas alternando dos colores diferentes) y otro poco para que IE6 pueda interpretar el :hover sobre nuestras celdas. Si bien no todos los navegadores podrán ver las esquinas redondeadas (IE8 y anteriores), seguirán viendo una tabla elegante y funcional.

table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
}
th:first-child {
-moz-border-radius: 6px 0 0 0;
-webkit-border-radius: 6px 0 0 0;
border-radius: 6px 0 0 0;
}
th:last-child {
-moz-border-radius: 0 6px 0 0;
-webkit-border-radius: 0 6px 0 0;
border-radius: 0 6px 0 0;
}

El HTML de la tabla no necesita ningún marcado especial para que estos efectos se apliquen. Vean como insertar sombras y efectos jQuery en los siguientes links:

Ver código | Ver demo

Dejar un comentario