Alle moderne nettsteder er designet for å fungere riktig på en rekke skjermbredder. Tabeller ble opprettet med vanlig HTML i gamle dager. Siden 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 utformingen avhengig av skjermstørrelsen de vises på, HTML- og CSS-mediespørsmål må brukes sammen med hverandre.
- Løsning 1: Tabeller kan opprettes ved hjelp av Divi Builder.
- Løsning 2: Bruk plugin er som inkluderer denne funksjonaliteten som standard!
- WP Table Manager
- Grensesnitt for WP Table Manager
- Konklusjon
Tabeller kan konstrueres med et lesbart oppsett på alle skjermstørrelser for et enkelt sett med informasjon som ikke er for stor eller mangfoldig, og dette kan oppnås med grunnleggende HTML- og CSS-tilnærminger. Imidlertid, hvis tabellen er ment å inneholde en betydelig mengde data, er det ikke lett å bygge et lesbart oppsett på mobile enheter eller skjermer med en bredde mindre enn 786 piksler.
Hvis webdesigneren som arbeider med HTML og CSS for å gjøre en tabell responsiv på alle skjermstørrelser, ikke vurderer datamengden, vil de sannsynligvis støte på problemer som påvirker lesbarheten av nettstedets innhold betydelig. Her er noen forslag som du, som Divi-nettstedsdesigner, kan praktisere når du prøver å lage responsive tabeller manuelt.
Mens du reduserer størrelsen på tabellen for å få plass til en mindre skjerm, må du konstruere flere CSS-klasser, med hver klasse målrettet mot en bestemt skjermoppløsning.
En alternativ løsning du kan gjøre er å skjule bestemte kolonner fra tabellen når skjermstørrelsen er mindre.
For mindre skjermer kan du inkludere horisontale eller vertikale ruller i topp- og bunntekstene til tabellen.
Lag et enkelt bord som kan skaleres for å passe til alle skjermstørrelser, og zoom inn på 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 produsert en veiledning for å demonstrere hvordan du kan lage responsive tabeller ved hjelp av Divis innebygde funksjoner. Sjekk det ut her. De har lagt til horisontale rulleegenskaper til kolonnene som flyter over bordbeholderen, slik at tabellen blir mer responsiv på brukerinndata. Du kan finne ut mer ved å gå til veiledningssiden:
Løsning 2: Bruk plugin er som inkluderer denne funksjonaliteten som standard!
Å lage en responsiv tabell for Divi-nettstedet ditt er ikke lenger et problem, takket være overfloden av GRATIS plugin løsninger tilgjengelig i repoen. Imidlertid er det litt vanskelig å finne bordplugg- plugin som har innebygde muligheter for mobil respons. Populære plugin som wpDataTables har ikke denne funksjonen som et gratis alternativ.
I denne oppskriften anser vi noe av det beste WP Tabe Builder- plugin .
WP Table Manager
WP Table Manager er det 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 ha 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 at sluttbrukeren kan 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, blir du sendt til installasjonsveiledningen. Følg prosedyrene og foreta de nødvendige justeringene etter eget ønske. Som ved magi har du laget et vakkert bord som vises vakkert på alle enheter i alle størrelser. Så er alt du trenger å gjøre å kopiere kortkoden og lime den inn på siden der du vil at den skal vises. Byggherren tilbyr for tiden syv elementer (tekst, bilde, liste, knapp, stjernevurdering, tilpasset HTML og kortkode) som du kan dra og slippe til plassholdere i tabeller ved hjelp av dra og slipp-funksjonen. Disse kan brukes til å lage forskjellige typer bord, for eksempel produktsammenligningstabeller, pristabeller, listetabeller osv .; dette er Tabell- plugin som vi oppdaget under undersøkelsen som det 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 gode 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å administrasjonsdetaljer når det gjelder håndtering av tabeller;
- Når filteralternativet er aktivert på bordet ditt, kan du søke i hver kolonne etter data og filtrere hele tabellen. Det fungerer også på store bord, inkludert paginering
- Pil opp og ned presentert i hver kolonne vil ordne tabelldataene dine. Bestilling av tabelldata fungerer også på store tabeller, inkludert paginering.
- Når du har laget tabellen din med alle dataene du trenger, kan du la brukere sortere, men du kan også opprette en standardrekkefølge. Det kan være ganske gunstig når informasjonen endres over tid, ettersom du kan sortere løpere etter løpet etter ankomstrekkefølge.
- Paginering er nødvendig hvis du vil vise et stort bord 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 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 inkluderer farger, bakgrunner, kolonnestørrelse, lenker.
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 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 tabelloppdateringer fra WordPress eller for å lagre serverressurser for et stort bord.
Etter at du har importert en tabell, kan alle data oppdateres. dette er bare en vanlig HTML-tabell som kan redigeres som et plugin ! WordPress-regneark.
På den annen side, etter å bygge et ryddig bord med alle dataene du ønsker, kan du eksportere den som en vanlig Excel-fil, og for ex amp le, re-run den oppdaterte Excel-ark senere. Brukerne dine kan nå eksportere tabellen som et Excel-ark på WordPress-frontend.
WP Table Manager synkroniseres også med Office 365 gjennom OneDrive.
OneDrive Excel-fil import og eksport verktøy er tilgjengelig; Spar tid ved å importere og endre filene dine på løpetur. Vær 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 faner fra databasen; den inneholder nå et verktøy for å generere tabeller fra et utvalg av nettstedsdatabaseinnhold, som tidligere ikke var tilgjengelig. Tabeller og kolonner fra databasen er valgt, konfigurerbare filtre brukes og tabeller administreres via WP Table manager grensesnittet. Når databasen er oppdatert, økes tabellen automatisk! I tillegg har du sortering, filtrering, automatisk design og paginering.
Hvis du ikke er en utvikler, kan du visuelt koble ethvert databasemateriale til HTML-tabellen din. Alle tabeller i databasen din presenteres mens du genererer en ny tabell fra databaseinnholdet.
Nettstedsdatabasen din kan gjøre et enkelt søk og velge tabeller og kolonner; dette er ganske gunstig i en enorm database. Videre er en veiviser her for å hjelpe deg med tabellen fra databasen trinn for trinn.
I siste fase, før du forhåndsviser tabellen fra databasen, kan du skrive det egendefinerte spørsmålet ditt på de spesifiserte databasetabellene. Vi støtter noen funksjoner, som VELG, ERSTAT, RENAVN, VIS, FORKLAR, BESKRIV.
En databasetabell kommer noen ganger med mange rader; Dermed kan dette alternativet hjelpe deg med å vise et bord som passer inn på skjermen. Dessuten kan du angi en forhåndsdefinert mengde rader i tabellen, hver side. Videre kan du også velge en kolonne for å sortere hele tabellen som standard.
WordPress-databasetabellforbindelsen er ikke begrenset til bare WordPress-tabeller. Alle tabellene som ikke er fra WordPress, men installert i samme database, kan kobles sammen.
Blant de enorme dataene på bordet ditt kan du lage noen få tilpassede regler for å konsentrere deg om et bestemt objekt. Hvis du er kjent med det, kan du spille med databaseoperatørene som>, <, LIKE, IN ...
Tabellene fra databasen du har opprettet 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 å batch redigere noen database data som for eks amp le, flere post-publiseringsdato som ville ha tatt en stund hvis det gjøres en etter en.
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 webside. Ved hjelp av disse plugin kan du enkelt lage tabeller som kan leses på alle enheter i bare noen få enkle trinn. Dessuten er responsive tabeller sikker på å gi positive samlede opplevelser for besøkende på nettstedet. Så prøv dette og gi oss beskjed om din opplevelse i kommentarfeltet nedenfor.
