Alle moderne hjemmesider er designet til at fungere korrekt på en række forskellige skærmbredder. Tabeller blev lavet ved hjælp af almindelig HTML i gamle dage. Efterhånden som fleksibelt webdesign er blevet den nye standard, har grundlæggende HTML-tabeller kæmpet for at følge med kravene fra moderne hjemmesider. Fordi de simple HTML-tabeller ikke er responsive, er teksten, der er inkluderet i dem, ekstremt svær at læse på mobilskærmstørrelser, hvorfor de bruges til at udvikle responsive tabeller, der tilpasser deres layout afhængigt af den skærmstørrelse, de bliver vist på, HTML- og CSS-medieforespørgsler skal bruges sammen med hinanden.
- Løsning 1: Tabeller kan oprettes ved hjælp af Divi Builder.
- Løsning 2: Gør brug af tabel- plugin , der inkluderer denne funktionalitet som standard!
- WP Table Manager
- Interface til WP Table Manager
- Konklusion
Tabeller kan konstrueres med et læsbart layout på alle skærmstørrelser for et enkelt sæt information, der ikke er for stort eller forskelligartet, og dette kan opnås med grundlæggende HTML- og CSS-tilgange. Men hvis tabellen er beregnet til at indeholde en betydelig mængde data, er det ikke let at bygge et læsbart layout på mobile enheder eller skærme med en bredde på mindre end 786 pixels.
Hvis webdesigneren, der arbejder med HTML og CSS for at få en tabel til at reagere på alle skærmstørrelser, ikke tager mængden af data i betragtning, vil de sandsynligvis løbe ind i problemer, der i væsentlig grad påvirker læsbarheden af webstedets indhold. Her er nogle forslag, som du som Divi-webstedsdesigner kan bruge i praksis, når du forsøger at oprette responsive tabeller manuelt.
Mens du reducerer bordets størrelse for at rumme en mindre skærm, skal du konstruere flere CSS-klasser, hvor hver klasse målretter mod en bestemt skærmopløsning.
En alternativ løsning, du kan gøre, er at skjule specifikke kolonner fra tabellen, når skærmstørrelsen er mindre.
For mindre skærme kan du inkludere vandrette eller lodrette ruller i tabellens sidehoveder og sidefødder.
Opret en enkelt tabel, der kan skaleres, så den passer til alle skærmstørrelser, og zoom bordet for at gøre materialet mere læsbart.
Disse løsninger kræver en betydelig indsats, og kravene kan variere afhængigt af indhold og skærmstørrelse.
Løsning 1: Tabeller kan oprettes ved hjælp af Divi Builder.
Elegant Themes har lavet en tutorial for at demonstrere, hvordan man konstruerer responsive tabeller ved hjælp af Divis indbyggede funktioner. Tjek det ud her. De har tilføjet vandrette rullefunktioner til de kolonner, der flyder over tabelcontaineren, hvilket gør det muligt for tabellen at reagere mere på brugerinput. Du kan finde ud af mere ved at gå til vejledningssiden:
Løsning 2: Gør brug af tabel- plugin , der inkluderer denne funktionalitet som standard!
At lave en responsiv tabel til dit Divi-websted er ikke længere et problem, takket være den overflod af GRATIS plugin løsninger, der er tilgængelige i repoen. Det er dog lidt vanskeligt at finde plugin , der har indbyggede mobilresponsmuligheder. Populære plugin som wpDataTables har ikke denne funktion som en gratis mulighed.
I denne artikel betragter vi et af de bedste WP Tabe Builder plugin .
WP Table Manager
WP Table Manager er det eneste WordPress- plugin , der giver en hel regnearksgrænseflade til at administrere tabeller. Opret en tabel, vælg et tema, og begynd at redigere tabeller, så snart du er færdig med at oprette dem. Du vil drage fordel af et omfattende sæt kraftfulde tabelredigeringsfunktioner, herunder HTML-celleredigering, tabelkopiering, beregning og synkronisering med Excel, Google Sheets og Office 365; det er så enkelt som at klikke på en celle og redigere data med eller uden hjælp fra en visuel teksteditor, så slutbrugeren kan ændre en tabel.
WP Table Manager giver dig mulighed for at designe attraktive, responsive borde ved hjælp af en simpel visuel grænseflade. Det er gratis at bruge. Når du har aktiveret den, vil du blive sendt til opsætningsguiden. Følg procedurerne og foretag de nødvendige justeringer efter din smag. Som ved et trylleslag har du skabt et smukt bord, der vises smukt på enhver enhed af enhver størrelse. Så skal du bare kopiere kortkoden og indsætte den på den side, hvor du ønsker den skal vises. Bygherren tilbyder i øjeblikket syv elementer (Tekst, Billede, Liste, Knap, Stjerneklassificering, Brugerdefineret HTML og Shortcode), som du kan trække og slippe i tabelpladsholdere ved hjælp af træk og slip-funktionen. Disse kan bruges til at bygge forskellige typer tabeller, såsom produktsammenligningstabeller, pristabeller, listetabeller osv.; dette er det Tabel- plugin , som vi opdagede under vores undersøgelse for at være det mest novice-venlige. Vær opmærksom på, at den nuværende version ikke har et søgefelt eller nogen anden form for filtreringsfunktionalitet. Derudover, hvis du har til hensigt at indtaste eller administrere mange datasæt, er dette muligvis ikke den ideelle mulighed. Til denne type brugsscenarie er Visualizer eller Tablepress begge fremragende valg.
Interface til WP Table Manager
Du kan inkludere kortkoden i enten et kodemodul eller et tekstmodul i Divi.
DIVI-temaet inkluderer WP Table Manager .
WP Table Manager plugin giver dig svar på håndtering af detaljer, når det kommer til håndtering af tabeller;
- Når filterindstillingen er aktiveret på din tabel, kan du søge i hver kolonne for data og filtrere hele tabellen. Det fungerer også på store tabeller, inklusive paginering
- Op- og ned-pilene i hver kolonne vil arrangere dine tabeldata. Tabeldatabestilling fungerer også på store tabeller, inklusive paginering.
- Når du har konstrueret din tabel med alle de data, du har brug for, kan du lade brugerne sortere, men du kan også oprette en standardrækkefølge. Det kan være ret fordelagtigt, når information ændres over tid, da du kan sortere løbere efter løbet efter ankomstrækkefølge.
- Sideinddeling er nødvendig, hvis du vil vise en stor tabel på din hjemmesides frontend, mens du vedligeholder dine serverressourcer. Vælg et forudindstillet antal tabelrækker på hver side.
Der er også en åben måde at administrere excel-dokumenter gennem WP Table Manager Excel-filimportøren. Du kan dog kun importere og transformere Excel-data som en redigerbar HTML-tabel eller importere Excel-filen med dens stil inklusive farver, baggrunde, kolonnestørrelse, links.
Administrer din Excel-tabel og publicer den på din WordPress-hjemmeside! Du kan uploade en Excel-fil til bordet via WordPress mediestyring eller en FTP-klient. Vælg derefter din Excel-fil og start synkroniseringen fra tabelindstillingerne.
Synkroniseringen mellem din WordPress-tabel og Excel-filen kan udføres regelmæssigt, mellem et minut og en dag. Den automatiske synkroniseringsforsinkelse kan også defineres for at undgå uønskede WordPress offentlige tabelopdateringer eller for at gemme serverressourcer til et stort bord.
Efter import af en tabel kan alle data blive opdateret; dette er bare en almindelig HTML-tabel, der kan redigeres som et plugin ! WordPress regneark.
På den anden side, efter at have bygget en ryddelig tabel med alle de data, du ønsker, kan du eksportere den som en konventionel Excel-fil og for amp køre det opdaterede Excel-ark igen senere. Dine brugere kan nu eksportere tabellen som et Excel-ark på WordPress-frontend.
WP Table Manager synkroniserer også med Office 365 gennem OneDrive.
OneDrive Excel-filimport- og eksportværktøj er tilgængeligt; spar tid ved at importere og ændre dine filer på flugt. Bliv endnu mere produktiv med OneDrive-filsynkronisering! Vælg en Office 365 Excel-fil for at synkronisere, justere automatisk, og den er live på dit websted.
WP Table Manager hjælper dig med at bygge og importere tabeller fra databasen; det inkluderer nu et værktøj til at generere tabeller fra et udvalg af webstedsdatabaseindhold, som tidligere ikke var tilgængeligt. Tabeller og kolonner fra databasen vælges, konfigurerbare filtre anvendes, og tabeller administreres via WP Table manager grænsefladen. Når databasen er opdateret, øges din tabel automatisk! Derudover har du sorterings-, filtrerings-, automatisk design- og pagineringsmuligheder til din rådighed.
Hvis du ikke er en udvikler, kan du visuelt forbinde ethvert databasemateriale til din HTML-tabel. Alle tabeller i din database præsenteres, mens du genererer en ny tabel fra databaseindhold.
Din hjemmesidedatabase kan lave en simpel søgning og vælge dine tabeller og kolonner; dette er ret fordelagtigt i en stor database. Desuden er en guide her til at hjælpe dig med tabellen fra databasen trin for trin.
I den sidste fase, før du forhåndsviser tabellen fra databasen, kan du skrive din tilpassede forespørgsel på de angivne databasetabeller. Vi understøtter nogle funktioner, såsom SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DSCRIBE.
En databasetabel kommer nogle gange med mange rækker; Derfor kan denne mulighed hjælpe med at vise en tabel, der passer ind på din skærm. Desuden kan du indstille et foruddefineret antal rækker i tabellen, hver side. Desuden kan du også vælge en kolonne til at sortere hele tabellen som standard.
WordPress-databasetabelforbindelsen er ikke begrænset til kun WordPress-tabeller. Alle tabeller, som ikke er fra WordPress, men installeret på samme database, kan tilsluttes.
Blandt de massive data på din tabel kan du oprette nogle få tilpassede regler for at koncentrere dig om et bestemt objekt. Hvis du er bekendt med det, kan du spille med databaseoperatørerne som >, <, LIKE, IN...
Tabellerne fra den database, du har oprettet, kan redigeres som alle andre tabeller (hvis brugeren har adgang til den fornuftige funktion); dette er ret praktisk at batchredigere nogle databasedata som amp . adskillige efterudgivelsesdatoer, der ville have taget et stykke tid, hvis de blev gjort én efter én.
Konklusion
Tabeller er en af de mest effektive måder at vise et sæt informationer på. Men for en mindre teknisk person er det en udfordring at oprette tabeller på en webside. Ved at bruge disse plugin kan du nemt lave tabeller, der kan læses på enhver enhed med blot et par enkle trin. Desuden er responsive tabeller sikre på at give positive overordnede oplevelser for dine besøgende på webstedet. Så prøv dette og fortæl os din oplevelse i kommentarfeltet nedenfor.
