Tabla con estilo a lo Web 2.0 y otras recomendaciones

Aunque las tablas no están bien vistas actualmente, a la hora de diseñar una página, pero siguen siendo válidas para lo que han sido creadas, para cuando tenemos que poner gran cantidad de datos tabulados (en filas y columnas).

Las tablas son contenedores de datos tabulados y sólo para eso, esa información desagradable que suelen acompañar a los gráficos, con los nombres y números que a nadie le gusta. Para eso está la etiqueta <table>, para ordenar esos datos y nada más. Y ahora que ya tiene su función, aprendamos a utilizarlas bien.

En el artículo Web 2.0 Tables de CSSjuice, nos plantean la realización de una tabla, con la capacidad de interactuar en ella, pues en algunas ocasiones, sobre todo en las tablas grandes es difícil leer la información proporcionada, por lo tanto se trata de destacar una fila entera y sobre todo que resalte la celda donde se encuentra el puntero del ratón, y ese efecto se produzca cuando nos desplazamos por toda la tabla (con el ratón).

Aquí puedes ver su vista previa del efecto, en donde puedes apreciar en el ejemplo que una pequeña cantidad de código, puede hacer que tu sitio sitio, en este caso la tabla sea mucho más fácil de usar. En la siguiente ilustración lo puedes ver gráficamente:

En el artículo mencionado nos proporciona a modo de tutorial, todo lo necesario para que la podamos construir y adaptarla a nuestras necesidades, para ellos nos deja todos los códigos necesarios (HTML y CSS).

Una vez metidos en materia, he revisado algunos artículos que ya he publicado y de entre ellos dejo algunos datos interesantes sobre el tema de las tablas:

Top 10 CSS Table Designs. Nos deja 10 consejos para que sea más fácil de implementar el diseños de una tabla mediante los sencillo estilos CSS, para darle buena apariencia a las feas tablas y todo eso en un abrir y cerrar los ojos.

Una impresionante tabla de CSS Table Gallery con un extenso muestrario de 98 estilos CSS para nuestras tablas. En dicho artículo en la columna “Design Name” tienes los enlaces a la vista previa de cada una de ellas, por lo que si encuentras alguna que sea de tu agrado, puedes descargarte su código. Un sitio bastante útil si estas buscando darle un toque profesional a la presentación de datos en las aburridas

En Tablecloth que nos ofrece con solo agregar algo de CSS y JS, la realización de tablas un poco más vistosas, sin necesidad de complicarnos la vida. Aquí tienes el enlace a su descarga y demo. Esta librería es muy liviana y puede ayudarnos en cuanto a facilitar la lectura de los datos tabulados.

Puedes echar un vistazo al artículo 21+ Fresh Ajax CSS Tables., para darle un buen toque en el estilo a una tabla de datos, una veintena de maneras de presentar las aburridas tablas de forma más moderna. Eso se logra con CSS y Ajax, son técnicas útiles para mostrar información en filas y columnas,

Aunque aún tengo más artículos, pero con los comentados puede ser suficiente para enfrentarnos al diseño de tablas.

Escrito por Toni

Comparte este artículo:

Estas son las categorías a las que pertenece el artículo Tabla con estilo a lo Web 2.0 y otras recomendaciones:

Curiosidades, Desarrollo web, CSS, HTML

Insertar un Comentario