Las tablas probablemente son el elemento que peor fue utilizado de forma histórica en el diseño web. Los que tengan varios años en el rubro recordarán como se utilizan para maquetear una web completa. Por suerte estas practicas ya no se realizan y las tablas finalmente son utilizadas para lo que fueron concebidas, es decir, tabular datos.
Uno de los problemas frecuentes a la hora de trabajar con tablas es el de cambiar su aspecto visual, esto ocurre porque no hay muchas cosas para hacer y modificar, el elemento en sí es bastante estático, no obstante un pequeño cambio que puede cambiar sustancialmente la estética de una tabla es hacer que sus bordes sean redondos. Algo que históricamente se hizo utilizando imágenes, ahora mismo lo podemos hacer utilizando solamente CSS3.
Desde Red Team Design realizaron un pequeño tutorial explicando paso a paso como realizar esta implementación en apenas unos minutos y con muy poco código.
El resultado final se ve de la siguiente manera:
Les recomiendo visitar la demostración online.
El autor de este pequeño y útil tutorial realiza una impecable implementación de las hojas de estilo. También pueden ver un pequeño ejemplo de como realizar el efecto zebra utilizando jQuery, este es un pequeño hack de apenas unas lineas pero que evita tener que realizar complicadas y sucias implementaciones desde el lenguaje que genera la tabla.
Web: Red Team Design
Prácticas tablas con bordes redondeados - CSS3
12 años ago
[…] crearon un sencillo tutorial con el que podrás diseñar tus tablas con bordes redondeados.Vía | Ver previo online TweetArtículos interesantesBordes redondeados con CSS3Manipulando el DOM con […]
arlejc
12 años ago
Interesante implementación con CSS3…
A mí tampoco me gustó la idea de usar tablas, esperaba más bien que existiera un elemento propio para la maquetación. Ahora hemos venido evolucionando a que el uso de distintas herramientas tengan un mejor enfoque.