28 Tablas CSS Ajax con efectos increíbles

Desde el punto de vista del diseño HTML las tablas no se suelen utilizar, pero eso no significa que tengas que olvidarte de ellas por completo. Todavía representan la solución más sencilla en el caso de que tengas que tabular información, por ejemplo, listas de precios, horarios, etc.

Lo interesante aquí es que tanto Ajax como CSS vienen a ayudarnos a que esas tablas tengan un aspecto más interesante que el que tendrían utilizando etiquetas ‘table’ HTML básicas. Veamos aquí algunos tutoriales que nos permiten crear tablas la mar de llamativas y vistosas con muy poco esfuerzo.

En primer lugar, si vas a crear el código HTML a mano, lo interesante sería que crearas una estructura HTML de tablas básica de forma correcta, este sería un buen ejemplo básico:

 

<table>

<!– Cabecera de la tabla –>
<thead>
<tr>
<th scope=”col” id=”…”> (Cabecera de la tabla) </th>
</tr>
</thead>

<!– Pie de tabla –>
<tfoot>
<tr>
<td> (Pie de la tabla) </td>
</tr>
</tfoot>

<!– Cuerpo de la tabla –>
<tbody>
<tr>
<td> (Contenido de la tabla) </td>
</tr>
</tbody>

</table>

Por otro lado, algunos consejos básicos para que las tablas queden bien: intenta ajustar los contenidos (texto a la izquierda, números a la derecha, números con la misma cantidad de decimales).

Tabla CSS responsive

tabla-css-responsive
Esta tabla se ajusta según el tamaño de la ventana. Link

Tabla CSS clásica

tabla-css-clasica
Una tabla CSS con aspecto bastante clásico. Link

Tabla CSS con efecto cebra

tabla-css-cebra
Link

Tabla ordenable, redimensionable y editable

tabla-ordenable-redimensionable-editable
Este interesante diseño de tabla te permite ordenar las columnas, redimensionarlas e incluso editar los contenidos directamente. Link

Tabla HTML5 editable

tabla-html5-editable
Esta tabla está basada en HTML5 y puede editarse directamente gracias a código JavaScript. Link

Tabla CSS con estilos

tabla-estilo-css
Link

Tabla CSS centrada

tabla-css-centrada
Link

Tabla CSS con efectos

tablas-css-efectos
Estas tablas CSS vienen con algunos efectos visuales interesantes. Link

Tabla con bloqueo de filas

tabla-css-bloqueo-filas
Las filas de esta tabla pueden bloquearse, activas la casilla de la izquierda y se convierten en filas fijas. No incluye la tabla en sí, sino la técnica para aplicarla. Link

Tabla con efecto Arrastrar y soltar

tabla-drag-drop
Un curioso efecto de ‘drag and drop’ clásico para aplicar a tablas. Link

Tabla para listas de precios

tabla-css-lista-precios
Esta tabla está diseñada especialmente para mostrar los clásicos charts de precios según planes de contratación, opciones de ventas, servicios ofrecidos, etc. Link

Tabla de precios CSS

tabla-precios-css
Esta es otra tabla ideada para mostrar listas de precios de forma elegante, algo más sencilla que la anterior. Link

Tablas de precios obscura

tablas-precios-css-plana
Otra lista de precios en tabla. Link

Tablas de precios al estilo Hosting

tabla-precios-css-hosting
Tablas al estilo de las clásicas tablas de precios que encuentras en empresas de Hosting. Link

Tabla de precios con efecto visual

tabla-precios-css-efecto
Link

Tabla de precios CSS para Bootstrap – Twitter

tabla-precios-bootstrap
Link

Tabla de precios con efecto Hover

tabla-precios-css-efecto-hover-responsive
Esta tabla CSS está ideada para mostrar precios igual que las anteriores, pero además tiene efecto hover cuando pasas el ratón por encima de alguna de las columnas y es responsive. Link

Tabla con scroll vertical

tabla-css-scroll-vertical
Con esta tabla puedes hacer scroll vertical para navegar entre las diferentes filas. Link

Tabla CSS3 responsive

CSS3-tabla-responsive
Otro diseño de tabla basado en CSS3 con efecto responsive que se ajusta al tamaño de diferentes ventanas y pantallas. Link

Tabla CSS3 simple

tabla-simple-css3LinkDescarga

Tabla con árbol de contenidos

tabla-arbol-contenidos
Una tabla CSS con efecto de ‘árbol de contenidos’ clásico. Link

Tabla CSS para colores

tabla-colores-css
Esta tabla está ideada para mostrar valores de colores RGB. Link

Tabla CSS compleja con búsqueda y ordenación

tabla-busqueda-ordenacion
Aquí puedes aprender a crear una tabla un poco más compleja con casilla de búsqueda y efectos de ordenación. Basada en CSS Ajax y RailsLink

Tabla CSS con lista de características

tabla-css-caracteristicas
Una clásica tabla con lista de características. Link

Tabla Plegable

tablas-css-plegables
Aquí puedes contraer o plegar las tablas y luego expandirlas según necesites, un interesante efecto. Link

Tabla CSS con esquinas redondeadas

tabla-css-esquinas-redondeadas
Una tabla basada en CSS con las cuatro esquinas redondeadas. Link

Plugin jQuery para ordenar tablas

tablas-jquery-ordenacion
Link

Tabla CSS Responsive

tabla-responsive-css
Otro diseño de tabla con efecto responsive. Link

1 comment… add one
  • Johnny

    Lo que necesito es como hacer una tabla de un programa para un congreso pero que tenga la primera columna fija (la del horario(

Leave a Comment