El elemento en HTML se utiliza para mostrar datos tabulares. Es una forma de describir y mostrar datos que tendrían sentido en un software de hoja de cálculo. Entonces, en wpDataTables, tratamos básicamente con columnas y filas.

Tan simple como suena, las tablas tienen que ser uno de los objetos más difíciles de diseñar en la Web, gracias al marcado críptico y la cantidad de detalles que tenemos que cuidar. Se podría desperdiciar mucho tiempo en una sola mesa, aunque es solo una simple.

Por suerte, ya existen ejemplos de tablas CSS que puedes descargar y usar en tus proyectos.

En este artículo, veremos las tablas CSS que están claramente codificadas, organizadas y listas para descargar.

Aprovecharé esta oportunidad para informarle que si necesita crear tablas y gráficos en WordPress, wpDataTables es la mejor opción que puede usar.

Ahora volvamos a nuestras tablas CSS.

Tabla de contenido

Tablas regulares de CSS

Tabla receptiva

Ordenar filas de tabla por encabezados de tabla: ascendente y descendente (jQuery)

Tabla HTML y tabla CSS

Use tablas CSS para diseños cuando necesite una alineación vertical sencilla, pies de página fijos basados en CSS con alturas dinámicas y ordenación de pilas.

Tablas receptivas usando LI

LI es más fácil y permite una mayor personalización.

Sensible

Esto es un "

Sensible" con transición CSS3, box-shadow, propiedades de transformación. Tecnología de diseño web receptivo y sin JS.

Tabla receptiva

La tabla colapsa en una "lista" en pantallas pequeñas. Los encabezados se extraen de los atributos de datos.

Tabla responsiva + Vista detallada

Encabezado de tabla fijo

Encabezado de tabla fijo con un código jQuery simple.

tabla CSS

Usar CSS para hacer aparecer una fila, hacer desaparecer una fila y mostrar datos en la tabla actualizándose en vivo. También al pasar el cursor sobre una fila se expande para mostrar más información.

Mesa receptiva con flexbox

La idea era crear una bonita mesa de trabajo que también funcionara en pantallas más pequeñas. Creo que esta es una buena solución. Funciona incluso con un ancho de 405px.

Destacado de tabla CSS puro (vertical y horizontal)

Un truco simple (y desagradable) para resaltar vertical y horizontalmente en tablas hechas con CSS puro.

Diseño de tabla sensible a CSS

Uso de CSS para diseños de tablas sensibles en lugar de flotantes. Responsivo (todo se reduce a una fila cada uno), también.

Tabla receptiva

Tabla receptiva con patrones de tabla RWD

Tabla de información nutricional en HTML y CSS

Tabla de datos receptiva y accesible

Tabla de datos accesible y con capacidad de respuesta móvil primero. En ventanas gráficas más estrechas, el hilo se oculta, las filas se convierten en tarjetas con etiquetas que se muestran usando un atributo de datos-*.