Alle moderne nettsteder er designet for å fungere korrekt på en rekke skjermbredder. Tabeller ble laget med vanlig HTML i gamle dager. Etter hvert som fleksibel webdesign har blitt den nye standarden, har enkle HTML-tabeller slitt med å holde tritt med kravene til moderne nettsteder. Fordi de enkle HTML-tabellene ikke er responsive, er teksten i dem ekstremt vanskelig å lese på mobile skjermstørrelser. Derfor brukes de til å utvikle responsive tabeller som tilpasser layouten avhengig av skjermstørrelsen de vises på. HTML- og CSS-mediespørringer må brukes sammen.
- Løsning 1: Tabeller kan opprettes ved hjelp av Divi Builder.
- Løsning 2: Bruk tabell pluginer 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 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 et lesbart oppsett på mobile enheter eller skjermer med en bredde på mindre enn 786 piksler.
Hvis nettdesigneren som jobber med HTML og CSS for å lage en tabell responsiv på alle skjermstørrelser ikke tar hensyn til mengden data, vil de sannsynligvis støte på problemer som påvirker lesbarheten til nettstedets innhold betydelig. Her er noen forslag du, som en Divi-nettsidedesigner, kan sette ut i livet når du prøver å lage responsive tabeller manuelt.
Når du reduserer størrelsen på tabellen for å få plass til en mindre skjerm, må du konstruere flere CSS-klasser, der hver klasse er rettet 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 horisontal eller vertikal rulling i tabellens topptekster og bunntekster.
Lag én enkelt tabell som kan skaleres for å passe til alle skjermstørrelser, og zoom inn tabellen for å gjøre materialet mer lesbart.
Disse løsningene krever 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 veiledning som demonstrerer hvordan man konstruerer responsive tabeller ved hjelp av Divis innebygde funksjoner. Sjekk den ut her. De har lagt til horisontale rullefunksjoner i kolonnene som fyller tabellbeholderen, slik at tabellen kan reagere mer på brukerinput. Du kan finne ut mer ved å gå til veiledningssiden:
Løsning 2: Bruk tabell pluginer som inkluderer denne funksjonaliteten som standard!
Det er ikke lenger et problem å lage en responsiv tabell for Divi-nettstedet ditt, takket være det store utvalget av GRATIS plugin løsninger som er tilgjengelige i repoet. Det er imidlertid litt vanskelig å finne tabell- pluginsom har innebygde alternativer for mobilresponsivitet. Populære pluginsom wpDataTables har ikke denne funksjonen som et gratis alternativ.
I denne artikkelen vurderer vi en av de beste WP Tabe Builder plugin.
WP Table Manager
WP Table Manager er den eneste tabell plugin for WordPress som gir et komplett regnearkgrensesnitt for å administrere tabeller. Opprett en tabell, velg et tema, og begynn å redigere tabeller så snart du er ferdig med å opprette 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 at sluttbrukeren skal kunne 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 det, blir du sendt til installasjonsveiledningen. Følg prosedyrene og gjør nødvendige justeringer etter din smak. Som ved et trylleslag har du laget en vakker tabell som vises vakkert på alle enheter i alle størrelser. Alt du trenger å gjøre er å kopiere kortkoden og lime den inn på siden der du vil at den skal vises. Byggeren tilbyr for øyeblikket syv elementer (tekst, bilde, liste, knapp, stjernevurdering, tilpasset HTML og kortkode) som du kan dra og slippe inn i tabellplassholdere ved hjelp av dra-og-slipp-funksjonen. Disse kan brukes til å bygge ulike typer tabeller, for eksempel produktsammenligningstabeller, pristabeller, listetabeller osv.; dette er tabell- plugin som vi under undersøkelsen vår oppdaget var den mest nybegynnervennlige. Husk 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å detaljer om håndtering av tabeller;
- Når filteralternativet er aktivert i tabellen din, kan du søke etter data i hver kolonne og filtrere hele tabellen. Det fungerer også på store tabeller, inkludert paginering
- Pil opp og pil ned som vises i hver kolonne vil ordne tabelldataene dine. Ordning av tabelldata 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å opprette en standardrekkefølge. Det kan være ganske nyttig 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 en stor tabell på nettstedets frontend samtidig som du opprettholder serverressursene dine. Velg et forhåndsinnstilt antall tabellrader for hver side.
Det finnes 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 og 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 din og start synkroniseringen fra tabellinnstillingene.
Synkroniseringen mellom WordPress-tabellen din og Excel-filen kan gjøres regelmessig, mellom ett minutt og én dag. Den automatiske synkroniseringsforsinkelsen kan også defineres for å unngå uønskede oppdateringer av offentlige WordPress-tabeller eller for å spare serverressurser for en stor tabell.
Etter import av en tabell kan alle data oppdateres; dette er bare en vanlig HTML-tabell som kan redigeres som en plugin! WordPress-regneark.
På den annen side, etter å ha laget en ryddig tabell med alle dataene du ønsker, kan du eksportere den som en vanlig Excel-fil og forampkjø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 via OneDrive.
OneDrive Excel-filimport- og eksportverktøy er tilgjengelig. Spar tid ved å importere og endre filene dine mens du er på farten. Bli enda mer produktiv med OneDrive-filsynkronisering! Velg en Office 365 Excel-fil som skal synkroniseres, juster den automatisk, og den er tilgjengelig på nettstedet ditt.
WP Table Manager hjelper deg med å bygge og importere faner fra databasen. Den inkluderer nå et verktøy for å generere tabeller fra et utvalg av nettstedsdatabaseinnhold, noe 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 oppdateres, økes tabellen automatisk! I tillegg har du sorterings-, filtrerings-, automatisk design- og pagineringsalternativer til din disposisjon.
Hvis du ikke er utvikler, kan du visuelt koble databasemateriale til HTML-tabellen din. Alle tabeller i databasen din presenteres når du genererer en ny tabell fra databaseinnhold.
Nettstedets database kan gjøre et enkelt søk og velge tabeller og kolonner; dette er ganske nyttig i en stor database. Videre er det en veiviser her for å hjelpe deg med tabellen fra databasen trinn for trinn.
I den siste fasen, før du forhåndsviser tabellen fra databasen, kan du skrive din egendefinerte spørring på de angitte databasetabellene. Vi støtter noen funksjoner, som SELECT, REPLACE, RENAME, SHOW, EXPLAIN og DESCRIBE.
En databasetabell kommer noen ganger med mange rader; derfor kan dette alternativet hjelpe med å vise en tabell som passer inn i skjermen. I tillegg kan du angi et forhåndsdefinert antall rader i tabellen, for hver side. Videre kan du også velge en kolonne for å sortere hele tabellen som standard.
WordPress-databasetabelltilkoblingen er ikke begrenset til bare WordPress-tabeller. Alle tabeller som ikke er fra WordPress, men som er installert på samme database, kan kobles til.
Blant de enorme dataene i tabellen din kan du opprette noen tilpassede regler for å konsentrere deg om et bestemt objekt. Hvis du er kjent med det, kan du leke deg med databaseoperatorer 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 for å redigere noen databasedata i batch, som forampflere datoer etter publisering, noe som ville tatt litt tid hvis det ble gjort én etter én.
Konklusjon
Tabeller er en av de mest effektive måtene å vise frem informasjon på. For en mindre teknisk person er det imidlertid en utfordring å lage tabeller på en nettside. Ved å bruke disse pluginkan 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 din erfaring i kommentarfeltet nedenfor.
