Alle moderne websites zijn ontworpen om correct te functioneren op verschillende schermbreedtes. Tabellen werden vroeger gemaakt met gewone HTML. Omdat flexibel webontwerp de nieuwe standaard is geworden, hebben eenvoudige HTML-tabellen moeite gehad om aan de eisen van moderne websites te voldoen. Omdat de eenvoudige HTML-tabellen niet responsief zijn, is de tekst die erin is opgenomen uiterst moeilijk te lezen op mobiele schermformaten. Daarom worden ze gebruikt om responsieve tabellen te ontwikkelen die hun lay-out aanpassen afhankelijk van de schermgrootte waarop ze worden bekeken. HTML- en CSS-mediaquery's moeten in combinatie met elkaar worden gebruikt.
- Oplossing 1: Tabellen kunnen worden gemaakt met Divi Builder.
- Oplossing 2: Maak gebruik van plugin -ins die deze functionaliteit standaard bevatten!
- WP Table Manager
- Interface voor de WP Table Manager
- Conclusie
Tabellen kunnen worden geconstrueerd met een leesbare lay-out op alle schermformaten voor een enkele set informatie die niet te groot of divers is, en dit kan worden bereikt met eenvoudige HTML- en CSS-benaderingen. Als de tabel echter bedoeld is om een aanzienlijke hoeveelheid gegevens te bevatten, is het niet eenvoudig om een leesbare lay-out op te bouwen op mobiele apparaten of schermen met een breedte van minder dan 786 pixels.
Als de webontwerper die met HTML en CSS werkt om een tabel responsief te maken op alle schermformaten geen rekening houdt met de hoeveelheid gegevens, zal hij waarschijnlijk problemen tegenkomen die de leesbaarheid van de inhoud van de site aanzienlijk beïnvloeden. Hier volgen enkele suggesties die u als Divi-websiteontwerper in de praktijk kunt brengen als u handmatig responsieve tabellen probeert te maken.
Terwijl u de grootte van de tabel verkleint om plaats te bieden aan een kleiner scherm, moet u meerdere CSS-klassen construeren, waarbij elke klasse zich richt op een bepaalde schermresolutie.
Een alternatieve oplossing die u kunt doen, is specifieke kolommen uit de tabel verbergen als de schermgrootte kleiner is.
Voor kleinere schermen kunt u horizontale of verticale scrolls opnemen in de kop- en voetteksten van de tabel.
Maak één tabel die kan worden geschaald zodat deze op alle schermformaten past, en zoom in op de tabel om het materiaal beter leesbaar te maken.
Deze oplossingen vergen een aanzienlijke hoeveelheid inspanning en de vereisten kunnen verschillen afhankelijk van de inhoud en schermgrootte.
Oplossing 1: Tabellen kunnen worden gemaakt met Divi Builder.
Elegant Themes heeft een tutorial gemaakt waarin wordt gedemonstreerd hoe responsieve tabellen kunnen worden gemaakt met behulp van de ingebouwde functies van Divi. Bekijk het hier. Ze hebben horizontale schuifmogelijkheden toegevoegd aan de kolommen die de tabelcontainer overlopen, waardoor de tabel beter reageert op gebruikersinvoer. U kunt meer informatie vinden door naar de tutorialpagina te gaan:
Oplossing 2: Maak gebruik van plugin -ins die deze functionaliteit standaard bevatten!
Het maken van een responsieve tabel voor uw Divi-website is niet langer een probleem, dankzij de overvloed aan GRATIS plugin inoplossingen die beschikbaar zijn in de repository. Het is echter een beetje lastig om tabelplug plugin te vinden die ingebouwde opties voor mobiele responsiviteit hebben. Populaire plugin zoals wpDataTables hebben deze functie niet als gratis optie.
In dit artikel beschouwen we de WP Tabe Builder plugin als een van de beste.
WP Table Manager
WP Table Manager is de enige WordPress- plugin in die een volledige spreadsheetinterface biedt om tabellen te beheren. Maak een tabel, selecteer een thema en begin met het bewerken van tabellen zodra u klaar bent met het maken ervan. U profiteert van een uitgebreide reeks krachtige functies voor het bewerken van tabellen, waaronder het bewerken van HTML-cellen, het kopiëren van tabellen, berekeningen en synchronisatie met Excel, Google Spreadsheets en Office 365; het is net zo eenvoudig als op een cel klikken en gegevens bewerken met of zonder de hulp van een visuele teksteditor, zodat de eindgebruiker een tabel kan wijzigen.
WP Table Manager kunt u aantrekkelijke, responsieve tabellen ontwerpen met behulp van een eenvoudige visuele interface. Het is gratis te gebruiken. Zodra u deze heeft geactiveerd, wordt u naar de installatiehandleiding gestuurd. Volg de procedures en breng de nodige aanpassingen naar wens aan. Als bij toverslag heb je een prachtige tafel gecreëerd die prachtig wordt weergegeven op elk apparaat van elk formaat. Vervolgens hoeft u alleen maar de shortcode te kopiëren en in de pagina te plakken waar u deze wilt laten verschijnen. De builder biedt momenteel zeven elementen (Tekst, Afbeelding, Lijst, Knop, Sterbeoordeling, Aangepaste HTML en Shortcode) die u kunt slepen en neerzetten in tijdelijke aanduidingen voor tabellen met behulp van de functie slepen en neerzetten. Deze kunnen worden gebruikt om verschillende soorten tabellen samen te stellen, zoals productvergelijkingstabellen, prijstabellen, lijsttabellen, enz.; dit is de Table- plugin waarvan we tijdens ons onderzoek hebben ontdekt dat deze het meest beginnersvriendelijk is. Houd er rekening mee dat de huidige versie geen zoekveld of enige andere vorm van filterfunctionaliteit heeft. Als u bovendien veel datasets wilt invoeren of beheren, is dit wellicht niet de ideale optie. Voor dit type gebruiksscenario zijn Visualizer of Tablepress beide uitstekende keuzes.
Interface voor de WP Table Manager
U kunt de shortcode opnemen in een codemodule of een tekstmodule in Divi.
Het DIVI-thema omvat de WP Table Manager .
WP Table Manager plugin geeft antwoord op het beheren van details als het gaat om het omgaan met tabellen;
- Zodra de filteroptie voor uw tabel is geactiveerd, kunt u in elke kolom naar gegevens zoeken en de hele tabel filteren. Het werkt ook op grote tabellen, inclusief paginering
- De pijlen omhoog en omlaag in elke kolom rangschikken uw tabelgegevens. Het ordenen van tabelgegevens werkt ook op grote tabellen, inclusief paginering.
- Nadat u uw tabel heeft samengesteld met alle gegevens die u nodig heeft, kunt u gebruikers laten sorteren, maar u kunt ook een standaardvolgorde instellen. Dat kan behoorlijk handig zijn als de informatie in de loop van de tijd verandert, omdat je lopers na de race kunt sorteren op volgorde van aankomst.
- Paginering is nodig als u een grote tabel op de frontend van uw website wilt weergeven terwijl u uw serverbronnen behoudt. Selecteer een vooraf ingesteld aantal tabelrijen per pagina.
Er is ook een open manier om Excel-documenten te beheren via de WP Table Manager Excel-bestandsimporter. U kunt Excel-gegevens echter alleen importeren en transformeren als een bewerkbare HTML-tabel of het Excel-bestand importeren met de stijl inclusief kleuren, achtergronden, kolomgrootte en koppelingen.
Beheer uw Excel-tabel en publiceer deze op uw WordPress-website! U kunt een Excel-bestand naar de tabel uploaden via WordPress-mediabeheer of een FTP-client. Selecteer vervolgens uw Excel-bestand en start de synchronisatie vanuit de tabelinstellingen.
De synchronisatie tussen uw WordPress-tabel en het Excel-bestand kan regelmatig worden uitgevoerd, tussen één minuut en één dag. De automatische synchronisatievertraging kan ook worden gedefinieerd om ongewenste updates van openbare WordPress-tabellen te voorkomen of om serverbronnen voor een grote tabel te besparen.
Na het importeren van een tabel kunnen alle gegevens worden bijgewerkt; dit is gewoon een gewone HTML-tabel die bewerkbaar is als een plugin ! WordPress-spreadsheet.
Aan de andere kant kunt u, nadat u een overzichtelijke tabel heeft gemaakt met alle gewenste gegevens, deze exporteren als een conventioneel Excel-bestand en amp het bijgewerkte Excel-blad later opnieuw uitvoeren. Uw gebruikers kunnen de tabel nu exporteren als een Excel-werkblad op de WordPress-frontend.
De WP Table Manager synchroniseert ook met Office 365 via OneDrive.
Er is een OneDrive Excel-bestandimport- en exporttool beschikbaar; bespaar tijd door uw bestanden onderweg te importeren en aan te passen. Wees nog productiever met bestandssynchronisatie in OneDrive! Selecteer een Office 365 Excel-bestand om te synchroniseren, pas het automatisch aan en het staat live op uw website.
WP Table Manager helpt u bij het bouwen en importeren van tabbladen uit de database; het bevat nu een tool voor het genereren van tabellen uit een selectie van websitedatabase-inhoud, die voorheen niet beschikbaar was. Tabellen en kolommen uit de database worden geselecteerd, configureerbare filters worden toegepast en tabellen worden beheerd via de WP Table manager interface. Wanneer de database wordt bijgewerkt, wordt uw tabel automatisch verhoogd! Daarnaast heb je de beschikking over sorteer-, filter-, automatische vormgeving en pagineringsmogelijkheden.
Als u geen ontwikkelaar bent, kunt u al het databasemateriaal visueel aan uw HTML-tabel koppelen. Alle tabellen in uw database worden gepresenteerd terwijl u een nieuwe tabel genereert op basis van de database-inhoud.
Uw websitedatabase kan een eenvoudige zoekopdracht uitvoeren en uw tabellen en kolommen selecteren; dit is behoorlijk nuttig in een enorme database. Bovendien is er een wizard die u stap voor stap helpt met de tabel uit de database.
In de laatste fase, voordat u een voorbeeld van de tabel uit de database bekijkt, kunt u uw aangepaste query op de opgegeven databasetabellen schrijven. We ondersteunen enkele functies, zoals SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Een databasetabel bevat soms veel rijen; deze optie kan dus helpen een tabel weer te geven die op uw scherm past. Bovendien kunt u per pagina een vooraf gedefinieerd aantal rijen van de tabel instellen. Bovendien kunt u ook een kolom kiezen om standaard de hele tabel te sorteren.
De WordPress-databasetabelverbinding is niet beperkt tot alleen WordPress-tabellen. Alle tabellen die niet van WordPress zijn maar in dezelfde database zijn geïnstalleerd, kunnen met elkaar worden verbonden.
Onder de enorme gegevens in uw tabel kunt u enkele aangepaste regels maken om u op een specifiek object te concentreren. Als je er bekend mee bent, kun je spelen met database-operators zoals >, <, LIKE, IN...
De tabellen uit de database die u hebt gemaakt, kunnen net als alle andere tabellen worden bewerkt (als de gebruiker toegang heeft tot die zinvolle functie) (als de gebruiker toegang heeft tot die praktische functie); dit is behoorlijk handig om sommige databasegegevens batchgewijs te bewerken, zoals amp verschillende datums na publicatie, wat een tijdje zou hebben geduurd als het één voor één was gedaan.
Conclusie
Tabellen zijn een van de meest effectieve manieren om een reeks informatie onder de aandacht te brengen. Voor een minder technisch persoon is het maken van tabellen op een webpagina echter een uitdaging. Met deze plugin ins kunt u in slechts enkele eenvoudige stappen eenvoudig tabellen maken die op elk apparaat leesbaar zijn. Bovendien zorgen responsieve tabellen zeker voor positieve algemene ervaringen voor de bezoekers van uw site. Probeer het dus eens en laat ons uw ervaringen weten in de commentaarsectie hieronder.
