Alle moderne websites zijn ontworpen om correct te functioneren op verschillende schermbreedtes. Tabellen werden vroeger met gewone HTML gemaakt. Omdat flexibel webdesign de nieuwe standaard is geworden, hebben eenvoudige HTML-tabellen moeite om de eisen van moderne websites bij te houden. 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 aan 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 behulp van de Divi Builder.
- Oplossing 2: Maak gebruik van table- 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 te bouwen op mobiele apparaten of schermen met een breedte van minder dan 786 pixels.
Als de webdesigner 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 zijn enkele suggesties die u, als Divi-websiteontwerper, in de praktijk zou kunnen brengen wanneer 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 maken, waarbij elke klasse zich richt op een bepaalde schermresolutie.
Een alternatieve oplossing die u kunt doen, is om specifieke kolommen uit de tabel te verbergen wanneer de schermgrootte kleiner is.
Voor kleinere schermen kunt u horizontale of verticale scrolls opnemen in de kop- en voetteksten van de tabel.
Maak een enkele tabel die kan worden geschaald om op alle schermformaten te passen, en zoom in op de tabel om het materiaal leesbaarder te maken.
Deze oplossingen vergen een aanzienlijke inspanning en de vereisten kunnen verschillen afhankelijk van de inhoud en de schermgrootte.
Oplossing 1: Tabellen kunnen worden gemaakt met behulp van de Divi Builder.
Elegant Themes heeft een tutorial gemaakt om te demonstreren hoe responsieve tabellen te bouwen met behulp van Divi's ingebouwde functies. Bekijk het hier. Ze hebben horizontale schuifmogelijkheden toegevoegd aan de kolommen die de tabelcontainer overlopen, waardoor de tabel beter kan reageren op gebruikersinvoer. U kunt meer te weten komen door naar de zelfstudiepagina te gaan:
Oplossing 2: Maak gebruik van table- 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 die beschikbaar zijn in de repo. Echter, het is een beetje lastig om tafel te vinden plugin s die zijn ingebouwde mobiele responsiviteit opties. Populaire plugin ins zoals wpDataTables hebben deze functie niet als gratis optie.
In dit artikel beschouwen we een van de beste de WP Tabe Builder- plugin .
WP Table Manager
WP Table Manager is de enige WordPress- plugin 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 set 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 zo simpel als klikken op een cel en het bewerken van gegevens met of zonder de hulp van een visuele teksteditor voor de eindgebruiker om een tabel te wijzigen.
WP Table Manager kunt u aantrekkelijke, responsieve tabellen ontwerpen met behulp van een eenvoudige visuele interface. Het is gratis te gebruiken. Nadat u het hebt geactiveerd, wordt u naar de installatiehandleiding gestuurd. Volg de procedures en maak de nodige aanpassingen naar uw wens. Als bij toverslag heb je een prachtige tafel gemaakt die prachtig wordt weergegeven op elk apparaat van elk formaat. Dan hoef je alleen maar de shortcode te kopiëren en op de pagina te plakken waar je hem wilt hebben. De bouwer biedt momenteel zeven elementen (tekst, afbeelding, lijst, knop, sterbeoordeling, aangepaste HTML en shortcode) die u kunt slepen en neerzetten in tabelplaatsaanduidingen met behulp van de functie slepen en neerzetten. Deze kunnen worden gebruikt om verschillende soorten tabellen te bouwen, zoals productvergelijkingstabellen, prijstabellen, lijsttabellen, enz.; dit is de Table- plugin die we tijdens ons onderzoek ontdekten als de meest beginnersvriendelijke. Houd er rekening mee dat de huidige versie geen zoekveld of een ander type filterfunctionaliteit heeft. Als u bovendien veel datasets wilt invoeren of beheren, is dit misschien 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 beantwoordt aan het beheren van details als het gaat om het verwerken van tabellen;
- Zodra de filteroptie op uw tabel is geactiveerd, kunt u in elke kolom naar gegevens zoeken en de hele tabel filteren. Het werkt ook op enorme tabellen, inclusief paginering
- De pijl omhoog en omlaag in elke kolom rangschikt uw tabelgegevens. Het bestellen van tabelgegevens werkt ook op enorme tabellen, inclusief paginering.
- Nadat u uw tabel met alle benodigde gegevens hebt samengesteld, kunt u gebruikers laten sorteren, maar u kunt ook een standaardvolgorde instellen. Dat kan best handig zijn als 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 met behoud van uw serverbronnen. Selecteer een vooraf ingesteld aantal tabelrijen, elke pagina.
Er is ook een open manier om Excel-documenten te beheren via de WP Table Manager Excel-bestandsimporteur. U kunt Excel-gegevens echter alleen importeren en transformeren als een bewerkbare HTML-tabel of het Excel-bestand importeren met zijn stijl inclusief kleuren, achtergronden, kolomgrootte, 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 gedaan, tussen een minuut en een dag. De automatische synchronisatievertraging kan ook worden gedefinieerd om ongewenste openbare WordPress-tabelupdates te voorkomen of om serverbronnen te besparen voor een enorme tafel.
Na het importeren van een tabel kunnen alle gegevens worden bijgewerkt; dit is gewoon een gewone HTML-tabel die kan worden bewerkt als een plugin ! WordPress-spreadsheet.
Aan de andere kant, na de bouw van een nette tabel met alle gegevens die u wilt, kunt u deze exporteren als een conventionele Excel-bestand en, voor ex amp le, re-run de bijgewerkte Excel-sheet later. Uw gebruikers kunnen de tabel nu exporteren als een Excel-blad op de WordPress-frontend.
De WP Table Manager synchroniseert ook met Office 365 via OneDrive.
OneDrive Excel-tool voor het importeren en exporteren van bestanden is beschikbaar; bespaar tijd door uw bestanden onderweg te importeren en te wijzigen. Werk nog productiever met OneDrive-bestandssynchronisatie! Selecteer een Office 365 Excel-bestand om te synchroniseren, automatisch aan te passen en het staat live op je 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-, automatisch ontwerp en paginering.
Als u geen ontwikkelaar bent, kunt u elk databasemateriaal visueel aan uw HTML-tabel koppelen. Alle tabellen in uw database worden weergegeven terwijl u een nieuwe tabel genereert op basis van database-inhoud.
Uw websitedatabase kan een eenvoudige zoekopdracht uitvoeren en uw tabellen en kolommen selecteren; dit is behoorlijk gunstig in een enorme database. Verder is er een wizard om je stap voor stap te helpen 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 schrijven op de opgegeven databasetabellen. We ondersteunen een aantal functies, zoals SELECT, REPLACE, RENAME, SHOW, EXPLAIN, DESCRIBE.
Een databasetabel heeft soms veel rijen; deze optie kan dus helpen om 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 verbinding met de WordPress-databasetabel is niet beperkt tot alleen WordPress-tabellen. Alle tabellen die niet van WordPress zijn maar op dezelfde database zijn geïnstalleerd, kunnen worden aangesloten.
Onder de enorme hoeveelheid gegevens op uw tabel kunt u een paar aangepaste regels maken om u op een specifiek object te concentreren. Als je er bekend mee bent, kun je spelen met de database-operators zoals >, <, LIKE, IN...
De tabellen uit de database die u hebt gemaakt, kunnen worden bewerkt zoals alle andere tabellen (als de gebruiker toegang heeft tot die zinvolle functie) (als de gebruiker toegang heeft tot die praktische functie); Dit is erg handig om batch bewerken van een database gegevens zoals voor ex amp le, diverse post-publicatie data die een tijdje als gedaan zou hebben genomen met één.
Conclusie
Tabellen zijn een van de meest effectieve manieren om een reeks informatie te presenteren. Voor een minder technisch persoon is het maken van tabellen op een webpagina echter een uitdaging. Met behulp van deze plugin ins kunt u in een paar eenvoudige stappen eenvoudig tabellen maken die op elk apparaat leesbaar zijn. Bovendien zullen responsieve tabellen zeker een positieve algemene ervaring bieden voor uw sitebezoekers. Dus, probeer dit eens en laat ons uw ervaring weten in de commentaarsectie hieronder.
