Alle moderne websteder er designet til at fungere korrekt på forskellige skærmbredder. Tabeller blev oprettet ved hjælp af almindelig HTML i gamle dage. Da fleksibelt webdesign er blevet den nye standard, har grundlæggende HTML-tabeller kæmpet for at følge med kravene fra moderne websteder. Da de enkle HTML-tabeller ikke reagerer, er teksten, der er inkluderet i dem, ekstremt vanskelig 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 vises 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 til et enkelt sæt information, der ikke er for stort eller forskelligt, 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 opbygge et læsbart layout på mobile enheder eller skærme med en bredde mindre end 786 pixels.
Hvis webdesigneren, der arbejder med HTML og CSS for at gøre en tabel lydhør over alle skærmstørrelser, ikke overvejer datamængden, vil de sandsynligvis løbe ind i problemer, der i væsentlig grad påvirker læsbarheden af webstedsindholdet. Her er nogle forslag, som du som Divi-webstedsdesigner kan praktisere, når du forsøger at oprette responsive tabeller manuelt.
Mens du reducerer størrelsen på tabellen for at rumme en mindre skærm, skal du konstruere flere CSS-klasser, hvor hver klasse er målrettet mod en bestemt skærmopløsning.
En alternativ løsning, du måske gør, er at skjule bestemte kolonner fra tabellen, når skærmstørrelsen er mindre.
For mindre skærme kan du medtage vandrette eller lodrette ruller i tabelens 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 indholdet og skærmstørrelsen.
Løsning 1: Tabeller kan oprettes ved hjælp af Divi Builder.
Elegant Themes har produceret en tutorial til at demonstrere, hvordan man konstruerer responsive tabeller ved hjælp af Divis indbyggede funktioner. Tjek det her. De har tilføjet vandrette rullefunktioner til kolonnerne, der overløber bordbeholderen, så tabellen bliver mere lydhør over for 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 tabel- plugin der har indbyggede muligheder for mobil respons. Populære plugin som wpDataTables har ikke denne funktion som en gratis mulighed.
I denne opskrivning betragter vi et af de bedste plugin til WP Tabe Builder.
WP Table Manager
WP Table Manager er det eneste WordPress-tabel- plugin der giver en hel regnearksgrænseflade til at styre tabeller. Opret en tabel, vælg et tema, og begynd at redigere tabeller, så snart du er færdig med at oprette dem. Du får 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å simpelt som at klikke på en celle og redigere data med eller uden hjælp fra en visuel teksteditor for slutbrugeren at ændre en tabel.
WP Table Manager giver dig mulighed for at designe attraktive, responsive tabeller ved hjælp af en simpel visuel grænseflade. Det er gratis at bruge. Når du har aktiveret det, sendes du til installationsvejledningen. Følg procedurerne, og foretag de nødvendige justeringer efter eget valg. Som ved en magi har du oprettet et smukt bord, der vises smukt på alle enheder af enhver størrelse. Så er alt hvad du skal gøre, at kopiere kortkoden og indsætte den på den side, hvor du vil have den til at blive vist. Byggeren tilbyder i øjeblikket syv elementer (tekst, billede, liste, knap, stjernebedømmelse, brugerdefineret HTML og kortkode), som du kan trække og slippe til placeringer i tabel ved hjælp af træk og slip-funktionen. Disse kan bruges til at opbygge forskellige typer borde, såsom produktsammenligningstabeller, pristabeller, listetabeller osv .; dette er det tabel- plugin som vi under vores undersøgelse opdagede som det mest nybegyndervenlige. Husk, at den nuværende version ikke har et søgefelt eller nogen anden form for filtreringsfunktionalitet. Derudover, hvis du agter at indtaste eller administrere mange datasæt, er dette muligvis ikke den ideelle mulighed. For 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 svarer på administrationsoplysninger, når det kommer til håndtering af tabeller;
- Når filterindstillingen er aktiveret på din tabel, kan du søge i hver kolonne efter data og filtrere hele tabellen. Det fungerer også på store borde, herunder paginering
- Pil op og pil ned i hver kolonne arrangerer dine tabeldata. Bestilling af tabeldata fungerer også på store tabeller, herunder 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 gavnligt, når information ændrer sig over tid, da du kan sortere løbere efter løbet efter ankomstordre.
- Paginering er nødvendig, hvis du vil vise en stor tabel på dit webstedsfront, mens du opretholder dine serverressourcer. Vælg en forudindstillet mængde tabelrækker, 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 omdanne Excel-data som en redigerbar HTML-tabel eller importere Excel-filen med dens stil inkluderer farver, baggrunde, kolonnestørrelse, links.
Administrer din Excel-tabel og udgiv den på dit WordPress-websted! Du kan uploade en Excel-fil til tabellen via WordPress-mediehåndtering 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 en enorm tabel.
Efter import af en tabel kan alle data opdateres; dette er bare en almindelig HTML-tabel, der kan redigeres som et plugin ! WordPress-regneark.
På den anden side, efter at opbygge en pæn tabel med alle de data, du ønsker, kan du eksportere det som en konventionel Excel-fil, og for ex amp le, re-run den opdaterede Excel-ark senere. Dine brugere kan nu eksportere tabellen som et Excel-ark på WordPress-frontend.
WP Table Manager synkroniseres 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 undervejs. Vær endnu mere produktiv med OneDrive-filsynkronisering! Vælg en Office 365 Excel-fil, der skal synkroniseres, justeres automatisk, og den er live på dit websted.
WP Table Manager hjælper dig med at opbygge og importere faner fra databasen; det indeholder 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 opdateres, forøges din tabel automatisk! Derudover har du mulighed for sortering, filtrering, automatisk design og paginering.
Hvis du ikke er udvikler, kan du visuelt forbinde ethvert databasemateriale til din HTML-tabel. Alle tabeller i din database præsenteres, mens der genereres en ny tabel fra databaseindhold.
Din webstedsdatabase foretager muligvis en simpel søgning og vælger dine tabeller og kolonner; dette er ret gavnligt i en enorm database. Desuden er en guide her for 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 brugerdefinerede forespørgsel på de angivne databasetabeller. Vi understøtter nogle funktioner, som VÆLG, ERSTAT, OMDØB, VIS, FORKLAR, BESKRIV.
En databasetabel kommer undertiden med mange rækker; Derfor kan denne mulighed hjælpe med at vise et bord, der passer ind på din skærm. Derudover kan du indstille en foruddefineret mængde af rækker i tabellen, hver side. Desuden kan du også vælge en kolonne for at sortere hele tabellen som standard.
Forbindelsen til WordPress-databasetabellen er ikke begrænset til kun WordPress-tabeller. Alle tabeller, der ikke er fra WordPress, men installeret i den samme database, kan tilsluttes.
Blandt de massive data på dit bord kan du oprette et par brugerdefinerede regler for at koncentrere dig om et bestemt objekt. Hvis du er fortrolig med det, kan du lege 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) (hvis brugeren har adgang til den praktiske funktion); dette er ret praktisk at batch redigere nogle databasedata som f.eks. flere amp efter offentliggørelsen, der ville have taget et stykke tid, hvis de blev gjort en efter en.
Konklusion
Tabeller er en af de mest effektive måder at fremvise et sæt information på. For en mindre teknisk person er det imidlertid en udfordring at oprette tabeller på en webside. Ved hjælp af disse plugin kan du nemt lave tabeller, der kan læses på enhver enhed i blot et par enkle trin. Desuden er responsive tabeller sikker på at give positive samlede oplevelser for dine besøgende. Så prøv dette, og fortæl os din oplevelse i kommentarfeltet nedenfor.
