Alle moderne nettsteder er designet for å fungere korrekt på en rekke skjermbredder. Tabeller ble laget med vanlig HTML i gamle dager. Ettersom fleksibel webdesign har blitt den nye standarden, har grunnleggende HTML-tabeller slitt med å holde tritt med kravene til moderne nettsteder. Fordi de enkle HTML-tabellene ikke er responsive, er teksten som er inkludert i dem ekstremt vanskelig å lese på mobilskjermstørrelser, og det er derfor de brukes til å utvikle responsive tabeller som tilpasser oppsettet deres avhengig av skjermstørrelsen de vises på, HTML- og CSS-mediespørringer må brukes sammen med hverandre.
- Løsning 1: Tabeller kan opprettes ved hjelp av Divi Builder.
- Løsning 2: Benytt deg av plugin -er som inkluderer denne funksjonaliteten som standard!
- WP Table Manager
- Grensesnitt for WP Table Manager
- Konklusjon
Tabeller kan konstrueres med en lesbar layout på alle skjermstørrelser for et enkelt sett med informasjon som ikke er for stort eller mangfoldig, og dette kan oppnås med grunnleggende HTML- og CSS-tilnærminger. Men hvis tabellen er ment å inneholde en betydelig mengde data, er det ikke lett å bygge en lesbar layout på mobile enheter eller skjermer med en bredde på mindre enn 786 piksler.
Hvis webdesigneren som jobber med HTML og CSS for å gjøre en tabell responsiv på alle skjermstørrelser ikke tar hensyn til mengden data, vil de sannsynligvis støte på problemer som har betydelig innvirkning på lesbarheten til nettstedets innhold. Her er noen forslag som du, som en Divi-nettsteddesigner, kan sette ut i livet når du prøver å lage responsive tabeller manuelt.
Mens du reduserer størrelsen på bordet for å få plass til en mindre skjerm, må du konstruere flere CSS-klasser, med hver klasse rettet mot en bestemt skjermoppløsning.
En alternativ løsning du kan gjøre er å skjule spesifikke kolonner fra tabellen når skjermstørrelsen er mindre.
For mindre skjermer kan du inkludere horisontale eller vertikale rulling i tabellens topp- og bunntekst.
Lag en enkelt tabell som kan skaleres for å passe alle skjermstørrelser, og zoom bordet for å gjøre materialet mer lesbart.
Disse løsningene krever en betydelig innsats, og kravene kan variere avhengig av innhold og skjermstørrelse.
Løsning 1: Tabeller kan opprettes ved hjelp av Divi Builder.
Elegant Themes har laget en opplæring for å demonstrere hvordan man konstruerer responsive tabeller ved å bruke Divis innebygde funksjoner. Sjekk det ut her. De har lagt til funksjoner for horisontal rulling til kolonnene som flyter over tabellbeholderen, slik at tabellen kan være mer responsiv på brukerinndata. Du kan finne ut mer ved å gå til veiledningssiden:
Løsning 2: Benytt deg av plugin -er som inkluderer denne funksjonaliteten som standard!
Å lage et responsivt bord for Divi-nettstedet ditt er ikke lenger et problem, takket være overfloden av GRATIS plugin løsninger tilgjengelig i repoen. Det er imidlertid litt vanskelig å finne plugin -er som har innebygde mobilresponsalternativer. Populære plugin -er som wpDataTables har ikke denne funksjonen som et gratis alternativ.
I denne artikkelen ser vi på en av de beste WP Tabe Builder plugin .
WP Table Manager
WP Table Manager er den eneste WordPress- plugin som gir et helt regnearkgrensesnitt for å administrere tabeller. Lag en tabell, velg et tema og begynn å redigere tabeller så snart du er ferdig med å lage dem. Du vil dra nytte av et omfattende sett med kraftige tabellredigeringsfunksjoner, inkludert HTML-celleredigering, tabellkopiering, beregning og synkronisering med Excel, Google Sheets og Office 365; det er så enkelt som å klikke på en celle og redigere data med eller uten hjelp fra en visuell tekstredigerer for sluttbrukeren å endre en tabell.
WP Table Manager lar deg designe attraktive, responsive tabeller ved hjelp av et enkelt visuelt grensesnitt. Det er gratis å bruke. Når du har aktivert den, vil du bli sendt til oppsettguiden. Følg prosedyrene og foreta de nødvendige justeringene etter din smak. Som ved et trylleslag har du laget et vakkert bord som vises vakkert på alle enheter uansett størrelse. Da er det bare å kopiere kortkoden og lime den inn på siden der du vil at den skal vises. Byggeren tilbyr for tiden syv elementer (tekst, bilde, liste, knapp, stjernevurdering, egendefinert HTML og kortkode) som du kan dra og slippe inn i tabellplassholdere ved å bruke dra og slipp-funksjonen. Disse kan brukes til å bygge ulike typer tabeller, som produktsammenligningstabeller, pristabeller, listetabeller, etc.; Dette er Table plugin som vi oppdaget under vår undersøkelse for å være den mest nybegynnervennlige. Vær oppmerksom på at den nåværende versjonen ikke har et søkefelt eller noen annen type filtreringsfunksjonalitet. I tillegg, hvis du har tenkt å legge inn eller administrere mange datasett, er dette kanskje ikke det ideelle alternativet. For denne typen bruksscenario er Visualizer eller Tablepress begge utmerkede valg.
Grensesnitt for WP Table Manager
Du kan inkludere kortkoden i enten en kodemodul eller en tekstmodul i Divi.
DIVI-temaet inkluderer WP Table Manager .
WP Table Manager plugin svarer på administrasjon av detaljer når det gjelder håndtering av tabeller;
- Når filteralternativet er aktivert på tabellen din, kan du søke etter data i hver kolonne og filtrere hele tabellen. Det fungerer også på store tabeller, inkludert paginering
- Opp- og nedpilene som vises i hver kolonne vil ordne tabelldataene dine. Tabelldatabestilling fungerer også på store tabeller, inkludert paginering.
- Når du har konstruert tabellen med alle dataene du trenger, kan du la brukerne sortere, men du kan også etablere en standardrekkefølge. Det kan være ganske gunstig når informasjon endres over tid, ettersom du kan sortere løpere etter løpet etter rekkefølge.
- Paginering er nødvendig hvis du vil vise en stor tabell på grensesnittet på nettstedet ditt mens du opprettholder serverressursene. Velg en forhåndsinnstilt mengde tabellrader, hver side.
Det er også en åpen måte å administrere Excel-dokumenter på gjennom WP Table Manager Excel-filimportøren. Du kan imidlertid bare importere og transformere Excel-data som en redigerbar HTML-tabell eller importere Excel-filen med stilen, inkludert farger, bakgrunner, kolonnestørrelse, koblinger.
Administrer Excel-tabellen din og publiser den på WordPress-nettstedet ditt! Du kan laste opp en Excel-fil til tabellen via WordPress medieadministrasjon eller en FTP-klient. Velg deretter Excel-filen din og start synkroniseringen fra tabellinnstillingene.
Synkroniseringen mellom WordPress-tabellen og Excel-filen kan gjøres regelmessig, mellom ett minutt og en dag. Den automatiske synkroniseringsforsinkelsen kan også defineres for å unngå uønskede offentlige WordPress-tabelloppdateringer eller for å spare serverressurser for et stort bord.
Etter import av en tabell kan alle data bli oppdatert; dette er bare en vanlig HTML-tabell som kan redigeres som en plugin ! WordPress regneark.
På den annen side, etter å ha bygget en ryddig tabell med alle dataene du ønsker, kan du eksportere den som en vanlig Excel-fil og for amp kjøre det oppdaterte Excel-arket på nytt senere. Brukerne dine kan nå eksportere tabellen som et Excel-ark på WordPress-grensesnittet.
WP Table Manager synkroniserer også med Office 365 gjennom OneDrive.
OneDrive Excel-filimport- og eksportverktøy er tilgjengelig; spar tid ved å importere og endre filene dine på flukt. Bli enda mer produktiv med OneDrive-filsynkronisering! Velg en Office 365 Excel-fil for å synkronisere, justere automatisk, og den er live på nettstedet ditt.
WP Table Manager hjelper deg med å bygge og importere taber fra databasen; den inkluderer nå et verktøy for å generere tabeller fra et utvalg av nettsteddatabaseinnhold, som tidligere ikke var tilgjengelig. Tabeller og kolonner fra databasen velges, konfigurerbare filtre brukes, og tabeller administreres via WP Table manager grensesnittet. Når databasen er oppdatert, økes tabellen automatisk! I tillegg har du alternativer for sortering, filtrering, automatisk design og paginering.
Hvis du ikke er en utvikler, kan du visuelt koble ethvert databasemateriale til HTML-tabellen. Alle tabeller i databasen din presenteres mens du genererer en ny tabell fra databaseinnhold.
Din nettsidedatabase kan gjøre et enkelt søk og velge tabellene og kolonnene dine; dette er ganske gunstig i en enorm database. Videre er en veiviser her for å hjelpe deg med tabellen fra databasen trinn for trinn.
I det siste stadiet, før du forhåndsviser tabellen fra databasen, kan du skrive din egendefinerte spørring på de spesifiserte databasetabellene. Vi støtter noen funksjoner, som SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DSCRIBE.
En databasetabell kommer noen ganger med mange rader; Derfor kan dette alternativet hjelpe til med å vise en tabell som passer inn på skjermen din. Dessuten kan du angi et forhåndsdefinert antall rader i tabellen, hver side. I tillegg kan du også velge en kolonne for å sortere hele tabellen som standard.
WordPress-databasetabelltilkoblingen er ikke begrenset til kun WordPress-tabeller. Alle tabellene som ikke er fra WordPress, men installert på samme database, kan kobles til.
Blant de enorme dataene på bordet ditt kan du lage noen få tilpassede regler for å konsentrere deg om et spesifikt objekt. Hvis du er kjent med det, kan du leke med databaseoperatørene som >, <, LIKE, IN...
Tabellene fra databasen du har laget kan redigeres som alle andre tabeller (hvis brukeren har tilgang til den fornuftige funksjonen) (hvis brukeren har tilgang til den praktiske funksjonen); dette er ganske praktisk å batchredigere noen databasedata som amp . flere etterpubliseringsdatoer som ville tatt litt tid hvis de ble gjort én etter én.
Konklusjon
Tabeller er en av de mest effektive måtene å vise frem et sett med informasjon. For en mindre teknisk person er det imidlertid en utfordring å lage tabeller på en nettside. Ved å bruke disse plugin -ene kan du enkelt lage tabeller som er lesbare på alle enheter med bare noen få enkle trinn. Dessuten vil responsive tabeller garantert gi positive helhetsopplevelser for besøkende på nettstedet ditt. Så prøv dette og gi oss beskjed om opplevelsen din i kommentarfeltet nedenfor.
