Entonces, desea poner una tabla de clasificación en su sitio web. ¿Cómo se hace esto? Una posibilidad es incrustar un script desde un sitio web externo. Sin embargo, esto trae consigo varios problemas de seguridad y también es un proceso más lento.

Otra posibilidad es agregar una tabla directamente, utilizando un editor visual de WordPress. Esto ofrece una personalización limitada de la mesa para satisfacer sus necesidades.

Una tercera opción es usar el complemento wpDataTables. Con este complemento, puede crear fácilmente tablas como esta.

Muchos quieren saber cómo se creó esta tabla de la Premier League. A continuación se describen los pasos para crear tablas básicas, modernas e interactivas usando wpDataTables.

Cómo crear la tabla de la Premier League

Esta tabla se basa en la piel Aqua. Se hicieron modificaciones eliminando el borde circundante. La tabla se ordena automáticamente en orden ascendente, según la información de la primera columna.

El formato condicional para la columna "#" es el siguiente:

El CSS personalizado es el siguiente:


.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd:hover td{background-color:#fffbf1 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.grey,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.grey{background-color: #dcdcdc !important;border-left: 1px solid #dcdcdc !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.blue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.blue{background-color: #0083c2 !important;border-left: 1px solid #0083c2 !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.red,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.red{background-color: #d6181f !important;border-left: 1px solid #d6181f !important;}
.wpdt-c .wpDataTablesWrapper table.wpDataTable tr.odd td.lightblue,
.wpdt-c .wpDataTablesWrapper table.wpDataTable td.lightblue{background-color: rgb(91,192,222) !important;border-left: 1px solid rgb(91,192,222) !important;}
.white-text { color: #fff !important; }

Las insignias fueron tomadas de la segunda columna. El ejemplo de Liverpool muestra cómo se agregaron las insignias en la columna de tipo "cadena":

El CSS personalizado luego define las clases "badge-1" y "badge-1.t1":


.badge-1 {    background-image: url(

El posicionamiento de la imagen del escudo del club es seleccionado por la segunda clase, como se muestra a continuación para todos los clubes en la tabla de clasificación:


.badge-1.t1 {    background-position: -250px -225px;}
.badge-1.t2 {    background-position: -250px -250px;}
.badge-1.t3 {    background-position: -275px -325px;}
.badge-1.t4 {    background-position: -150px -150px;}
.badge-1.t5{     background-position: 0 -50px;}
.badge-1.t6{    background-position: -275px -200px;}
.badge-1.t7 {      background-position: -350px -75px;}
.badge-1.t8 {    background-position: -50px -125px;}
.badge-1.t9 {    background-position: -250px -125px;}
.badge-1.t10 {    background-position: -350px -250px;}
.badge-1.t11 {    background-position: 0 -200px;
}
.badge-1.t12 {        background-position: -350px -125px;}
.badge-1.t13 {    background-position: -100px -100px;}
.badge-1.t14{        background-position: -50px -175px;}
.badge-1.t15 {    background-position: -250px -225px;}
.badge-1.t16 {    background-position: -325px -250px;}
.badge-1.t17 {    background-position: -75px -150px;}
.badge-1.t18 {    background-position: -25px -150px;}
.badge-1.t19 {        background-position: -75px -225px;}
.badge-1.t20 {    background-position: -225px -100px;    }

Las siguientes columnas están llenas de números enteros. La última columna contiene las estadísticas de victorias/derrotas/empates. Para llegar al diseño deseado se requiere mucho formato condicional:

El formato debe aplicarse hasta el número 20. Este es el ejemplo para Liverpool:

Los detalles para cada equipo serán diferentes. Toda la demás información se encuentra en el CSS personalizado:


.score-last-6 {    margin:0 auto;    border-collapse: separate;    display: table;    border-spacing: 3px 0;
height:11px;
vertical-align: middle;
}

.score-last-one{display: table-cell;    height: .7em;    width: .7em;}

.win {background: #0083c2;}

.lose{background: #d6181f;}

.equal {background: #dcdcdc;}

Se necesita algo de trabajo y ajustes para que se vea exactamente igual, pero básicamente así es como se hace.

Si encuentra interesante esta aplicación wpDataTables, también eche un vistazo a algunas de las otras tablas de la sección de exhibición.

Tablas de estadísticas con gráficos

wpDataTables se utiliza para generar una representación gráfica de datos estadísticos como tablas.

Tabla de clasificación de criptomonedas

En este ejemplo, las criptomonedas se clasifican en una tabla usando wpDataTables. Puede agregar esta tabla criptográfica a su sitio.

Catálogo de portátiles en línea

Esta tabla se puede utilizar para la comparación de productos. Por ejemplo, si tiene un sitio asociado, la tabla puede mostrar las características de los modelos de portátiles más populares.

Informes meteorológicos

wpDataTables se utiliza aquí para crear un resumen mensual del informe meteorológico.

Reportes financieros

El complemento se utiliza para crear una tabla que muestra datos financieros por país.

Catálogo de libros

Este estilo de tabla funciona bien para un sitio afiliado, como una librería.

Los fondos de inversión

wpDataTables puede crear una lista de fondos mutuos, ordenados por rendimiento.

Catálogo de Conductores

wpDataTables se usa para mostrar la configuración del controlador.

Únase a la comunidad de wpDataTables

Si trabaja con tablas, aquí hay algunas razones por las que una licencia de wpDataTables se adaptará a sus necesidades.

Hace que trabajar con tablas y gráficos sea muy fácil.
wpDataTables es el complemento de tabla de WordPress más vendido a nivel mundial.
Más de 30 000 empresas e individuos satisfechos ya utilizan wpDataTables.
Se utiliza en aplicaciones de gestión de datos financieros, científicos, estadísticos, comerciales y de otro tipo.

Crear tablas y gráficos responsivos de WordPress

Las tablas creadas con el complemento wpDataTables son intrínsecas y totalmente receptivas. No hay restricciones cuando se trata de plataformas o tipos de dispositivos.

Crear tablas grandes

Las mesas grandes no son un problema. wpDataTables maneja tablas con millones de filas de forma rápida y confiable. El servidor MySQL procesa todas las operaciones.

Filtros avanzados y opciones de búsqueda

Se pueden desarrollar filtros individuales para su conjunto de datos. Esto es muy útil para reducir los datos en una tabla de WordPress.

Editabilidad

wpDataTables tiene la opción de hacerlo editable. El contenido de las tablas de WordPress se puede editar en línea o en forma generada.

Resaltado de celdas

Nuestro complemento de tablas de WordPress tiene una funcionalidad similar al formato condicional en Excel. Dependiendo de su contenido, puede resaltar columnas, filas o celdas individuales.

Crear gráficos

Los datos en las tablas de WordPress se pueden usar para generar gráficos de WordPress. Se utilizan tres potentes motores para generar estos gráficos, que se actualizan en tiempo real.

Algunas críticas que recibimos a lo largo de los años

wpDataTables resuelve con éxito diferentes tareas para más de 30.000 clientes cada día. Esto incluye interacción con bases de datos, informes comerciales, catálogos, paneles científicos y muchos más.

¡wpDataTables ha sido una solución maravillosa para nosotros! Ya estábamos muy impresionados con las capacidades del complemento desde el primer momento. Los complementos TMS trabajaron con nosotros para personalizarlo especialmente para nuestras necesidades. Las personalizaciones nos permitieron crear una interfaz intuitiva para los clientes, para ingresar y editar datos. La atención al cliente y la capacidad de respuesta son insuperables. wpDataTables es simplemente un gran producto.

-Sara Woodmansee, Estados Unidos. Fotógrafo y mapeo geográfico en Geo1 / Aerial Filmworks

Desde la perspectiva de un desarrollador web y del cliente, wpDataTables es uno de los mejores complementos que encontré. No solo el precio es bueno, sino que también la funcionalidad es perfecta. Extremadamente fácil de usar y muy bien diseñado. Tiene muchas características que se adaptan a cualquier persona, desde principiantes hasta niveles avanzados. Los videos que complementan el complemento están bien explicados en profundidad con muchos ejemplos. No puedo enfatizar lo suficiente cuánto hizo que mi desarrollo web fuera más fácil y genial.

– Nordine Benhamari, Reino Unido. Desarrollador web, diseñador de base de datos en Thanet Volunteer Bureau

Si disfrutó leyendo este artículo sobre cómo crear la tabla de la Premier League, debe consultar este sobre los complementos del generador de tablas de WordPress .

También escribimos sobre algunos temas relacionados, como la alternativa de DataTables, la biblioteca de tablas de JavaScript, los complementos de tablas de WordPress, cómo crear una tabla en WordPress sin complementos, cómo insertar una tabla en WordPress y los complementos de tablas de precios de WordPress .

Fuente de grabación: wpdatatables.com