Hur man skapar en vädertabell med wpDataTables (det bästa pluginet att använda)
Du har säkert sett en vädertabell på nätet, men har du någonsin försökt bygga en?
Visst verkar det vara en fruktansvärd upplevelse med all data och villkorlig formatering som du behöver lägga till i tabellcellerna.
Vet du hur de säger att det inte finns dåligt väder, bara olämpliga kläder?
Detsamma gäller för att bygga ett väderbord. Om du inte kan skapa en, betyder det att du inte har rätt verktyg för jobbet.
I den här artikeln ska jag gå igenom att skapa en vädertabell med wpDataTables, WordPress-plugin nummer 1 för att skapa tabeller och diagram.
Vilken typ av vädertabell kan vi skapa? Nåväl, något sånt här:
Ja, det är en riktigt lång skärmdump. Du kan se den dynamiska vädertabellen här.
För att skapa en vädertabell som de vi presenterade tidigare har du några alternativ beroende på dina källdata.
1 Skapa en tabell från grunden
Om du inte har en datakälla kan du skapa din vädertabell från början med alternativet "Skapa tabeller manuellt" där du infogar data manuellt.
För att börja skapa en datatabell manuellt, öppna din WordPress adminpanel, gå till wpDataTables -> Skapa en tabell, välj det tredje alternativet "Skapa en tabell manuellt" och klicka på "Nästa".
Du kommer att visas guidesteget som hjälper dig att skapa tabellstrukturen där du kommer att skapa 14 kolumner: Period, Year, och alla andra kommer att vara namnen på månaderna (jan, feb…). För periodkolumner lämnar du kolumntypen som "Enradssträng" och för alla andra kommer du att ställa in kolumntypen "Heltal".
När du är klar med att konfigurera tabellen, klicka på "Skapa tabellen". En rullgardinsmeny öppnas med alternativen "Öppna i standardredigerare" eller "Öppna i Excel-liknande redigerare" och det är allt. Tabellstrukturen skapas. Nu kommer du att infoga dina data över standardredigeraren eller en Excel-liknande redigerare.
2 Skapa en tabell från en datakälla
Om du har data i någon datakälla som Excel, CSV, JSON, Google-kalkylblad, XML, PHP Serialized array eller i en tabell i databasen (SQL-källa), kommer du att använda det andra alternativet i tabellguiden.
För att börja skapa en datatabell kopplad till en befintlig datakälla, öppna din WordPress adminpanel, gå till wpDataTables -> Skapa en tabell, välj det andra alternativet "Skapa en datatabell länkad till en befintlig datakälla.", och klicka på "Nästa".
Beroende på vilken källa du har kommer du att följa instruktionerna:
För den här tabellen använder vi CSV som en datakälla som du kan ladda ner här. Du kommer att välja CSV som "Input data source type" och sedan över knappen Bläddra hitta det
källan som du tidigare laddat ner och laddar upp på din server. Klicka på Spara ändringar så att wpDataTables läser CSV-filen du laddade upp och tabellen skapas.
Efter att ha skapat tabellen, med något av de två alternativen, kan du anpassa och konfigurera din WordPress-tabell som du behöver.
I vårt fall aktiverar vi först alternativet "Visa filter i ett formulär ovanför tabellen" på fliken " Sortering och filtrering " i tabellinställningar och konfigurerar sedan avancerade filter för varje kolumn. För kolumnen Period ställer vi in "Välj boxfilter" och "Nummerfilter" för alla andra kolumner.
Sedan aktiverar vi alternativet "Responsivitet" på fliken "Visa" i tabellinställningarna och gömmer alla "Månad"-kolumner för surfplattor och mobila enheter i varje kolumninställningar eller snabbare i kolumnlista-knappen ovanför tabellen.
För att anpassa tabelldatafärgen använder vi villkorlig formatering. För den första kolumnen ställer vi in villkoret att om cellen innehåller 2 så "Sätt cell CSS-klass " till "blå-vit text".
Sedan skapar vi dessa klasser i fältet " Anpassad CSS" på fliken " Anpassa" i tabellinställningar så här:
.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}
.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}Så här:
Där nummer 1 i .wpDataTable-1 är ditt bords ID så du måste ändra det för din tabell
För alla andra kolumner ställer vi in samma villkor för att ställa in olika färger baserat på värdet i tabellen för Max Temperature-tabellen.
För den andra tabellen "Låg temperatur" använder vi samma tillvägagångssätt som för tabellen "Temperature Maximus", förutom villkoren i villkorlig formatering. Eftersom det är det lägre värdet på temperaturen använder vi dessa förhållanden.
Sedan skapar vi dessa klasser i fältet " Anpassad CSS" på fliken " Anpassa" i tabellinställningar så här:
.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}
.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}Där nummer 2 i .wpDataTable2 är ditt bords ID så du måste ändra det för din tabell.
Det är allt!
Vad du nu behöver göra är att dyka upp på dina sidor i front-end. Som med alla andra plugin använder vi kortkoder för att visa tabeller på användarnas sidor eller inlägg. Det är väldigt enkelt att lägga till kortkoder, speciellt om du använder populära sidbyggare som Elementor, WP Bakery eller Gutenberg.
Fler tabellstilar du kan skapa med wpDataTables
Är du intresserad av att skapa mer än bara vädertabeller?
Du måste ta en titt på några av de andra borden från showcase-sektionen.
Statistiktabeller med diagram
wpDataTables används för att generera en grafisk representation av statistisk data som diagram.
Ranktabell för kryptovaluta
I det här exemplet rankas kryptovalutor i en tabell med hjälp av wpDataTables. Du kan lägga till den här typen av kryptotabell till din webbplats med några justeringar.
Online katalog för bärbara datorer
Denna tabell kan användas för produktjämförelse. Om du till exempel har en webbplats där du presenterar och marknadsför produkter, kan tabellen visa egenskaperna hos de mest populära produkterna.
Finansiella rapporter
Insticksprogrammet används för att skapa en tabell som visar ekonomisk data per land. Uppenbarligen kan den anpassas för att presentera olika typer av finansiell data.
Bokkatalog
Denna bordsstil fungerar bra för en affiliate-sajt eller en onlinebokhandel.
Fonder
wpDataTables kan skapa en lista över fonder, sorterade efter resultat.
Katalog över drivrutiner
wpDataTables används för att visa drivrutinskonfiguration.
Gå med i wpDataTables Community
Om du arbetar med tabeller, här är några anledningar till varför en wpDataTables-licens passar dina behov.
- Det gör det enkelt att arbeta med tabeller och diagram.
- wpDataTables är ett globalt bästsäljande WordPress-bordplugin med ofta släppta uppdateringar och bra kundsupport.
- Redan mer än 40 000 nöjda företag och privatpersoner använder wpDataTables.
- Det används i finansiella, vetenskapliga, statistiska, kommersiella och andra datahanteringsapplikationer.
Med den kan du skapa responsiva WordPress-tabeller och diagram
Tabeller skapade med plugin-programmet wpDataTables är inneboende och fullt lyhörda. Det finns inga begränsningar när det gäller plattformar eller enhetstyper.
Du kan skapa stora tabeller
Stora bord är inga problem. wpDataTables hanterar tabeller med miljontals rader snabbt och tillförlitligt. MySQL-servern bearbetar alla operationer.
Avancerade filter och sökalternativ
Individuella filter för din datauppsättning kan utvecklas. Detta är mycket användbart för att begränsa data i en WordPress-tabell.
Redigerbarhet
wpDataTables har möjlighet att göra den redigerbar. Innehållet i WordPress-tabeller kan alltså redigeras inline eller i en genererad form.
Cellmarkering
Vår WordPress-tabellplugin har en funktion som liknar villkorlig formatering i Excel. Beroende på deras innehåll kan du markera kolumner, rader eller enskilda celler.
Massor av diagramalternativ
Data i WordPress-tabeller kan användas för att generera WordPress-diagram. Tre kraftfulla motorer används för att generera dessa diagram, som uppdateras i realtid.
Några recensioner vi fått under åren
wpDataTables löser framgångsrikt olika uppgifter för mer än 40 000 kunder varje dag. Detta inkluderar databasinteraktion, affärsrapporter, kataloger, vetenskapliga instrumentpaneler och många fler.
wpDataTables har varit en underbar lösning för oss! Vi var redan mycket imponerade av funktionerna i plugin direkt ur lådan. TMS-plugins samarbetade med oss för att anpassa det speciellt för våra behov. Anpassningarna gjorde det möjligt för oss att skapa ett intuitivt gränssnitt för kunder, för inmatning och redigering av data. Kundsupport och lyhördhet är oöverträffad. wpDataTables är helt enkelt en fantastisk produkt.
-Sara Woodmansee, USA. Fotograf & Geo Mapping på Geo1 / Aerial Filmworks
Ur en webbutvecklare och ett kundperspektiv är wpDataTables en av de bästa plugins jag stött på. Inte bara priset är bra utan även funktionaliteten är perfekt. Extremt lätt att använda och mycket väldesignad. Den har många funktioner som passar alla, från nybörjare till avancerade nivåer. Videorna som kompletterar pluginet är djupgående väl förklarade med många exempel. Jag kan inte nog betona hur mycket det gjorde min webbutveckling enklare och coolare.
– Nordine Benhamari, Storbritannien. Webbutvecklare, databasdesigner på Thanet Volunteer Bureau
Om du gillade att läsa den här artikeln om hur man skapar vädertabeller, bör du kolla in den här om WordPress- tabellgeneratorplugins.
Vi skrev också om några relaterade ämnen som DataTables-alternativ, JavaScript -tabellbibliotek, WordPress-tabellplugins, hur man skapar en tabell i WordPress utan ett plugin, hur man infogar en tabell i WordPress och WordPress- pristabellplugins.