Een uitgebreide gids voor het maken van betere HTML-tabellen in 2024

Vreemd genoeg is een van de moeilijkste web-technologieën om te beheersen een van de vroegste die beschikbaar zijn voor de browser na gewone tekst en afbeeldingen. Het probleem is vandaag nog groter met zoveel verschillende apparaattypen waarover moet worden nagedacht.

Perfecte tabellen zijn bijna onmogelijk te maken, tenzij ze zo weinig items bevatten dat er waarschijnlijk geen problemen worden veroorzaakt. De soorten fouten die kunnen optreden zijn onder meer:

• Tekstterugloop niet correct
• Rechtvaardiging fouten
• Tabelweergave van het scherm
• Problemen met bladeren
• Rijhoogte fouten
• Kolombreedte fouten
• Algemene lelijkheid of rommeligheid

In dit artikel zullen we bekijken hoe u dergelijke problemen kunt voorkomen, zodat uw tabellen de beste kans hebben om een ​​goede indruk te maken.

Te vermijden vermijdingsstrategieën

Omdat tabellen zo moeilijk zijn om goed te krijgen, proberen sommige mensen ze niet te gebruiken. Enkele veelvoorkomende strategieën zijn het gebruik van CSS om een ​​neptafel te maken en een afbeelding van de gegevenstabel te gebruiken zonder deze in code te implementeren.

Beide vermijdingsstrategieën hebben gebreken en moeten worden vermeden. Het gebruik van CSS om een ​​tabel te imiteren mist de semantische structuur die inherent is aan een tabel, die bruikbaarheid- en toegankelijkheidsproblemen kan creëren.

Een afbeelding van een tabel heeft geen last van de problemen die in de inleiding worden genoemd, maar degradeert uw SEO-potentieel en kan niet eenvoudig worden gewijzigd als uw gegevens moeten worden bijgewerkt. Het introduceert ook bruikbaarheid- en toegankelijkheidsproblemen.

Kaders zijn je vrienden

Veelgebruikte frameworks zoals Bootstrap en Foundation bevatten veel tijdbesparende tools en tabellen vormen hierop geen uitzondering. Het bouwen van een stijlvolle tafel in Bootstrap is niet moeilijk, maar er zijn enkele beperkingen als je gewoon van het rack af bouwt zonder wat maatwerk aan je inspanningen toe te voegen.

Uiterlijk is niet alles

Omdat inhoud en stijl altijd onafhankelijk moeten zijn, kan het zinvol zijn om uw tabel eerst in platte HTML te maken, alleen om er zeker van te zijn dat deze er goed uit zal zien voordat een speciale tabelstijl wordt toegepast.

Dit kan ook nuttig zijn om u eraan te herinneren dat een goede tafelconstructie meer vereist dan alleen de tafel er goed uit laten zien. Het moet ook een handig hulpmiddel zijnformationenafgiftesysteem. Als het doel van de tafel niet is om information, dan zou je een tabel niet moeten gebruiken voor wat je ook doet.

Streven naar toegankelijkheid

Sommige mensen hebben moeite met het zien en lezen van gedrukte tekst, dus het is een goed idee om tabellen toegankelijk te maken voor hen. U kunt erachter komen wat u moet weten over het toegankelijk maken van uw tabellen WebAIM.

Overweeg om ID-waarden aan tabelcomponenten te geven

Voor maximale controle over elk deel van de tabel (rijen, cellen), kunt u overwegen om ze op te gevendividubbele ID-waarden. Door ook klassewaarden toe te voegen, krijgt u nog meer flexibiliteit.

Door deze dingen te doen, krijg je veel meer werk voor je, dus het is alleen praktisch wanneer je een item per referentie moet kunnen verfijnen. Als u besluit dit te doen, kunt u elk willekeurig tabelitem rechtstreeks manipuleren met behulp van JavaScript en CSS.

Een van de complexiteiten van het maken van tabellen is dat we rijen, maar geen kolommen declareren. De kolommen worden dynamisch gemaakt, berekend op basis van het aantal gegevensitems dat u op elke rij plaatst. Dit is de reden waarom tabellen worden toegevoegd aan de laadtijd van uw pagina.

In feite betekent dit dat kolommen alleen in abstracte zin bestaan ​​voordat de pagina wordt weergegeven, dus u kunt ze geen enkele referentie geven. Door het eerste TD-item op een rij een klasse te geven van bijvoorbeeld "firstCol", biedt u een manier om rechtstreeks naar een kolom te verwijzen.

Compacte tafels zijn het beste

Het is in de mode om alles te bouwen met grote, goed zichtbare componenten. Vanuit een gezichtspunt van toegankelijkheid is dit geweldig. In termen van bruikbaarheid is dit echter niet altijd de beste manier, omdat dit tot problemen kan leiden.

De ontwikkelaars van Bootstrap hebben geëxperimenteerd met responsive tafels, maar tafels en responsiveheid gaat niet goed samen. Het is een slimme zet om uw tafels vanaf het begin zo te ontwerpen dat ze in portretmodus op een mobiel scherm passen.

Tabellen moeten altijd op scrollable zijn

Het is een goede gewoonte om de overstroomwaarde van een tabel altijd in te stellen op automatisch, maar niet op de tabel zelf. In plaats daarvan, wikkel de tafel in een div, iets als dit:

Dan is er veel PHP-code die de tabel opbouwt, en hiermee sluit:

Het deel dat het werk doet om de tafel schuifbaar te maken, bevindt zich op de eerste regel, waar de divisie tafelomslag een vaste hoogte krijgt en de overloopwaarde is ingesteld op automatisch. Als u dit doet met de tafel zelf, in plaats van een wikkel rond de tafel, kan dit onbedoelde effecten hebben.

Roep de zware hitters in als dat nodig is

Voor eenvoudige tabellen is dit overdreven, maar als u een tabel hebt die echt voordelen nodig heeft, zoals instelbare kolombreedtes en kolomsortering, zijn er enkele krachtige jQuery-toepassingen die zijn gebouwd om te helpen bij het bouwen van complexe tabellen.

De meest indrukwekkende optie die je zou willen voor een WordPress-site is wpDataTables, een WordPress-tabel plugin waarmee u eenvoudig kunt werken met tabellen, grafieken en gegevensbeheer. Hiermee kun je creëren responsive WordPress tabellen en grafieken.

De plugin werkt heel snel met grote tabellen, tot miljoenen rijen, maar je kunt ook veel aanpassingen doen en filteren op de tabellen, bijna alsof je in Excel of Google Spreadsheets bent.

De grootste en waarschijnlijk de beste is Flexigrid. Dit lijkt op een Java Swing-tabel en werkt op dezelfde manier.

De functies van Flexigrid zijn misschien zelfs te veel voor wat u nodig hebt, dus in dit geval kunt u overwegen TableSorter, dat is vrij een beetje eenvoudiger.

Hoewel de functies van dit soort hulpprogramma's spannend kunnen zijn, is het belangrijk dat ze nog meer tijd aan het laden van uw pagina toevoegen. Je kunt dit soort dingen het beste bewaren als je het echt nodig hebt.

Geautomatiseerde conversietools zullen normaal gesproken niet de beste resultaten opleveren

Er zijn CMS-invoegtoepassingen beschikbaar waarmee u documenttabellen naar HTML-tabellen kunt converteren. Deze zijn nergens in de buurt zo goed als zelf handmatig aan tafel te bouwen, dus als u superieure resultaten wilt, is automatisering van deze soort niet de juiste keuze.

Je eigen automa- tische automatisering is echter prima

PHP gebruiken om uw tabellen uit de database te construeren information is altijd een goed idee, en zeker te verkiezen boven alles handmatig te typen. Het verschil hier is dat u volledige controle heeft over hoe de automatisering werkt.

Wanneer u automatisering van derden gebruikt, moet de externe auteur aannames doen over uw tabel. Dit betekent dat je een generieke tabel krijgt met veel functies in vergelijking met het zelf maken van de tabel.

Gebruik tabellen op de juiste manier en zij zullen u belonen

Goede tafels worden ontworpen, ze ontstaan ​​niet zomaar. Wanneer je een in ontwerptformationenafgiftesysteem, u wilt dat het efficiënt en effectief is. Zorg ervoor dat uw tabellen zijn ontworpen om precies dat te zijn, en uw site zal maximaal profiteren van hun opname.

header afbeelding met dank aan Maggie Appleton