Sie möchten also eine Rangliste auf Ihrer Website veröffentlichen. Wie wird das gemacht? Eine Möglichkeit besteht darin, ein Skript von einer externen Website einzubetten. Dies bringt jedoch verschiedene Sicherheitsprobleme mit sich und ist auch ein langsamerer Prozess.
Eine andere Möglichkeit besteht darin, eine Tabelle direkt mit einem visuellen WordPress-Editor hinzuzufügen. Dies bietet eine begrenzte Anpassung des Tisches an Ihre Bedürfnisse.
Eine dritte Möglichkeit ist die Verwendung des wpDataTables-Plugins. Mit diesem Plugin können Sie ganz einfach Tabellen wie diese erstellen .
Viele wollen wissen, wie diese Premier-League-Tabelle entstanden ist. Im Folgenden sind die Schritte zum Erstellen einfacher, moderner, interaktiver Tabellen mit wpDataTables beschrieben.
So erstellen Sie die Premier League-Tabelle
Diese Tabelle basiert auf dem Aqua-Skin. Änderungen wurden vorgenommen, indem der umgebende Rand entfernt wurde. Die Tabelle wird anhand der Angaben in der ersten Spalte automatisch aufsteigend sortiert.
Die bedingte Formatierung für die Spalte „#” lautet wie folgt:
Das benutzerdefinierte CSS lautet wie folgt:
.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; }
Die Abzeichen wurden der zweiten Spalte entnommen. Das Beispiel für Liverpool zeigt, wie die Abzeichen in der Spalte vom Typ „String” hinzugefügt wurden:
Benutzerdefiniertes CSS definiert dann die Klassen „badge-1″ und „badge-1.t1″:
.badge-1 { background-image: url(Die Positionierung des Bildes des Vereinswappens wird von der zweiten Klasse gewählt, wie unten für alle Vereine in der Ligatabelle dargestellt:
.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; }
Die nächsten Spalten werden mit ganzen Zahlen gefüllt. Die letzte Spalte enthält die Gewinn-/Verlust-/Unentschieden-Statistiken. Um zum gewünschten Layout zu gelangen, ist viel bedingte Formatierung erforderlich:
Die Formatierung sollte bis Nummer 20 angewendet werden. Dies ist das Beispiel für Liverpool:
Die Details für jedes Team werden unterschiedlich sein. Alle weiteren Informationen finden sich im benutzerdefinierten CSS:
.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;}
Es sind einige Arbeiten und Optimierungen erforderlich, damit es genau gleich aussieht, aber im Grunde wird es so gemacht.
Wenn Sie diese wpDataTables-Anwendung interessant fanden, werfen Sie bitte auch einen Blick auf einige der anderen Tabellen aus dem Showcase-Bereich.
Statistiktabellen mit Diagrammen
wpDataTables wird verwendet, um eine grafische Darstellung statistischer Daten als Diagramme zu erzeugen.
Rangtabelle der Kryptowährung
In diesem Beispiel werden Kryptowährungen mithilfe von wpDataTables in einer Tabelle geordnet. Sie können diese Kryptotabelle zu Ihrer Website hinzufügen.
Online-Laptop-Katalog
Diese Tabelle kann zum Produktvergleich verwendet werden. Wenn Sie beispielsweise eine Partnerseite haben, kann die Tabelle die Eigenschaften der beliebtesten Laptop-Modelle anzeigen.
Wetterberichte
wpDataTables wird hier verwendet, um einen monatlichen zusammenfassenden Wetterbericht zu erstellen.
Finanzbericht
Das Plugin wird verwendet, um eine Tabelle zu erstellen, die Finanzdaten pro Land anzeigt.
Buchkatalog
Dieser Tabellenstil eignet sich gut für eine Affiliate-Website, z. B. einen Buchladen.
Investmentfonds
wpDataTables kann eine nach Leistung sortierte Liste von Investmentfonds erstellen.
Katalog der Treiber
wpDataTables wird verwendet, um die Treiberkonfiguration anzuzeigen.
Treten Sie der wpDataTables-Community bei
Wenn Sie mit Tabellen arbeiten, finden Sie hier einige Gründe, warum eine wpDataTables-Lizenz Ihren Anforderungen entspricht.
- Es macht das Arbeiten mit Tabellen und Diagrammen sehr einfach.
- wpDataTables ist ein weltweit meistverkauftes WordPress-Tabellen-Plugin.
- Bereits mehr als 30.000 zufriedene Unternehmen und Privatpersonen nutzen wpDataTables.
- Es wird in finanziellen, wissenschaftlichen, statistischen, kommerziellen und anderen Datenverwaltungsanwendungen verwendet.
Erstellen Sie ansprechende WordPress-Tabellen und -Diagramme
Mit dem wpDataTables-Plug-in erstellte Tabellen sind intrinsisch und vollständig reaktionsfähig. Es gibt keine Einschränkung hinsichtlich Plattformen oder Gerätetypen.
Erstellen Sie große Tabellen
Große Tische sind kein Problem. wpDataTables verarbeitet Tabellen mit Millionen von Zeilen schnell und zuverlässig. Der MySQL-Server verarbeitet alle Operationen.
Erweiterte Filter und Suchoptionen
Individuelle Filter für Ihren Datensatz können entwickelt werden. Dies ist sehr nützlich, um die Daten in einer WordPress-Tabelle einzugrenzen.
Bearbeitbarkeit
wpDataTables hat die Möglichkeit, es editierbar zu machen. Der Inhalt von WordPress-Tabellen kann somit inline oder in generierter Form bearbeitet werden.
Zellenhervorhebung
Unser WordPress-Tabellen-Plugin hat eine ähnliche Funktionalität wie die bedingte Formatierung in Excel. Je nach Inhalt können Sie Spalten, Zeilen oder einzelne Zellen hervorheben.
Diagramme erstellen
Die Daten in WordPress-Tabellen können verwendet werden, um WordPress-Diagramme zu erstellen. Drei leistungsstarke Engines werden verwendet, um diese Diagramme zu erstellen, die in Echtzeit aktualisiert werden.
Einige Bewertungen, die wir im Laufe der Jahre erhalten haben
wpDataTables löst jeden Tag erfolgreich unterschiedliche Aufgaben für mehr als 30.000 Kunden. Dazu gehören Datenbankinteraktionen, Geschäftsberichte, Kataloge, wissenschaftliche Dashboards und vieles mehr.
wpDataTables war eine wunderbare Lösung für uns! Wir waren bereits sehr beeindruckt von den Fähigkeiten des Plugins direkt nach dem Auspacken. TMS-Plugins haben mit uns zusammengearbeitet, um es speziell an unsere Bedürfnisse anzupassen. Die Anpassungen ermöglichten es uns, eine intuitive Benutzeroberfläche für Kunden zur Eingabe und Bearbeitung von Daten zu erstellen. Kundensupport und Reaktionsfähigkeit sind unübertroffen. wpDataTables ist einfach ein tolles Produkt.
-Sara Woodmansee, USA. Fotograf & Geo Mapping bei Geo1 / Aerial Filmworks
Aus Sicht eines Webentwicklers und Kunden ist wpDataTables eines der besten Plugins, die mir begegnet sind. Nicht nur der Preis ist gut, sondern auch die Funktionalität ist perfekt. Extrem einfach zu bedienen und sehr gut gestaltet. Es hat viele Funktionen, die für jeden geeignet sind, vom Anfänger bis zum Fortgeschrittenen. Die Videos, die das Plugin ergänzen, sind mit vielen Beispielen ausführlich erklärt. Ich kann nicht genug betonen, wie sehr es meine Webentwicklung einfacher und cooler gemacht hat.
– Nordine Benhamari, Großbritannien. Webentwickler, Datenbankdesigner bei Thanet Volunteer Bureau
Wenn Sie diesen Artikel über die Erstellung der Premier League-Tabelle gerne gelesen haben, sollten Sie sich diesen über WordPress-Tabellengenerator- Plugins ansehen.
Wir haben auch über einige verwandte Themen geschrieben, wie z. _