Betere HTML-tabellen maken

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 voor een goede tafelconstructie meer nodig is dan alleen de tafel er goed uit laten zien. Het zou ook een nuttig systeem voor informatieverwerking moeten zijn. Als het doel van de tabel niet is om informatie over te brengen, moet je geen tafel gebruiken voor wat je ook aan het doen bent.

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 hen individuele ID-waarden te geven. 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 verwijzing geven. Door het eerste TD-artikel op een rij een klasse van bijvoorbeeld "firstCol" te geven, 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 responsieve tabellen, maar tabellen en reactievermogen gaan niet goed samen. Uw tabellen vanaf het begin ontwerpen zodat ze in de portretmodus op een mobiel scherm passen, is een slimme zet.

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 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

Het is altijd een goed idee om PHP te gebruiken om tabellen samen te stellen uit database-informatie, en zeker de voorkeur om 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 zijn ontworpen, ze gebeuren niet zomaar. Wanneer u een informatieafleversysteem ontwerpt, wilt u 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

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.