Het leren van CSS-lay-outs schrijven kan lastig zijn, vooral als u bekend bent met het gebruik van tabellen om sjieke webpagina-lay-outs te maken. Maar hoewel HTML5 tabellen voor lay-out toestaat, is het geen goed idee.
Tafels zijn niet toegankelijk
Net als zoekmachines lezen de meeste schermlezers webpagina's in de volgorde waarin ze in de HTML worden weergegeven en kunnen tabellen erg moeilijk zijn om door schermlezers te analyseren. Dit komt omdat de inhoud in een tabellay-out, hoewel lineair, niet altijd zinvol is wanneer ze van links naar rechts en van boven naar beneden wordt gelezen. Plus, met geneste tabellen en verschillende lengtes op de tafel kunnen cellen de pagina erg moeilijk maken om te achterhalen.
Dit is de reden dat de HTML5-specificatie tabellen aanbeveelt voor layout en waarom HTML 4.01 dit niet toestaat. Toegankelijke webpagina's laten meer mensen toe om ze te gebruiken en zijn het kenmerk van een professionele ontwerper.
Met CSS kunt u een sectie definiëren als behorende bij de linkerkant van de pagina, maar deze als laatste in de HTML plaatsen. Schermlezers en zoekmachines zullen vervolgens eerst de belangrijke delen (de inhoud) lezen en de minst belangrijke onderdelen (navigatie) als laatste.
Tafels zijn lastig
Zelfs als u een tabel maakt met een webeditor, zijn uw webpagina's nog steeds erg ingewikkeld en moeilijk te onderhouden. Met uitzondering van de meest eenvoudige webpaginaontwerpen, vereisen de meeste lay-outtabellen het gebruik van veel attributen en van geneste tabellen.
Het bouwen van de tafel lijkt misschien gemakkelijk terwijl je het doet, maar als het klaar is, moet je het bijhouden. Zes maanden later is het misschien niet zo eenvoudig te onthouden waarom je de tafels hebt genest of hoeveel cellen er op een rij lagen enzovoort. Om nog maar te zwijgen over het feit dat, als u webpagina's bijhoudt als een teamlid, u aan alle betrokkenen moet uitleggen hoe de tabellen werken of verwachten dat ze meer tijd nodig hebben om wijzigingen aan te brengen.
CSS kan ook ingewikkeld zijn, maar het houdt de presentatie gescheiden van de HTML en maakt het op de lange termijn veel gemakkelijker te onderhouden. Bovendien kunt u met een CSS-indeling één CSS-bestand schrijven en al uw pagina's op die manier opmaken. Wanneer u vervolgens de lay-out van uw site wilt wijzigen, hoeft u slechts één CSS-bestand te wijzigen en de hele site te wijzigen - niet meer elke pagina één voor één doorlopen om de tabellen bij te werken om de lay-out bij te werken.
Tafels zijn inflexibel
Hoewel het mogelijk is om tabellay-outs met percentagebreedten te maken, zijn ze vaak langzamer te laden en kunnen ze de lay-out van uw lay-out drastisch veranderen. Maar als u gespecificeerde breedtes voor uw tabellen gebruikt, krijgt u een zeer stijve lay-out die niet goed zal lijken op monitoren met een ander formaat dan uw eigen.
Het maken van flexibele lay-outs die er goed uitzien op veel monitoren, browsers en resoluties is relatief eenvoudig. Met CSS-mediaquery's kunt u zelfs afzonderlijke ontwerpen maken voor schermen van verschillende grootte.
Geneste tabellen laden langzaam meer dan CSS voor hetzelfde ontwerp
De meest gebruikelijke manier om aantrekkelijke lay-outs te maken met tabellen is om tabellen te "nesten". Dit betekent dat een (of meer) tafel in een andere is geplaatst. Hoe meer tabellen genest zijn, hoe langer het duurt voordat de webbrowser de pagina weergeeft.
In de meeste gevallen gebruikt een tabellay-out meer tekens om te maken dan een CSS-ontwerp. En minder tekens betekent minder om te downloaden.
Tafels kunnen zoekmachineoptimalisatie schaden
De meest gangbare tabellay-out heeft een navigatiebalk aan de linkerkant van de pagina en de belangrijkste inhoud aan de rechterkant. Bij het gebruik van tabellen vereist dit (in het algemeen) dat de eerste inhoud die in de HTML wordt weergegeven, de navigatiebalk aan de linkerkant is. Zoekmachines categoriseren pagina's op basis van de inhoud en veel zoekmachines bepalen dat inhoud die bovenaan de pagina wordt weergegeven, belangrijker is dan andere inhoud. Dus, een pagina met eerst links navigatie zal verschijnen om inhoud te hebben die minder belangrijk is dan de navigatie.
Met behulp van CSS kunt u de belangrijke inhoud eerst in uw HTML plaatsen en vervolgens CSS gebruiken om te bepalen waar deze in het ontwerp moet worden geplaatst. Dit betekent dat zoekmachines de belangrijke inhoud eerst zullen zien, zelfs als het ontwerp deze lager op de pagina plaatst.
Tabellen worden niet altijd goed afgedrukt
Veel tafelontwerpen worden niet goed afgedrukt omdat ze gewoon te breed zijn voor de printer. Dus, om ze te laten passen, zullen browsers de tabellen uitschakelen en onderstaande secties afdrukken, wat resulteert in zeer onsamenhangende pagina's. Soms krijg je pagina's die er goed uitzien, maar de hele goede kant ontbreekt. Andere pagina's zullen secties op verschillende bladen afdrukken.
Met CSS kunt u een afzonderlijke stijlpagina maken voor het afdrukken van de pagina.
Tabellen voor lay-out zijn ongeldig in HTML 4.01
De HTML 4-specificatie luidt als volgt: "Tabellen mogen niet puur worden gebruikt als een middel om documentinhoud op te stellen, omdat dit problemen kan opleveren bij het renderen naar niet-visuele media."
Dus als u geldige HTML 4.01 wilt schrijven, kunt u geen tabellen gebruiken voor lay-out. Gebruik alleen tabellen voor tabelgegevens en tabelgegevens lijken in het algemeen op iets dat u mogelijk in een spreadsheet of een database kunt weergeven.
HTML5 heeft echter de regels gewijzigd en nu worden tabellen voor opmaak, hoewel niet aanbevolen, nu als geldige HTML beschouwd. In de HTML5-specificatie staat: "Tabellen mogen niet worden gebruikt als lay-outhulpmiddelen." Dit komt omdat tabellen voor lay-out moeilijk zijn voor schermlezers om te differentiëren, zoals eerder vermeld.
Het gebruik van CSS om uw pagina's te positioneren en op te maken is de enige geldige HTML 4.01-manier om de ontwerpen te krijgen die u hebt gebruikt om tabellen te maken, en HTML5 beveelt deze methode ten zeerste ook aan.
Tabellen voor lay-out kunnen invloed hebben op uw jobvooruitzichten
Naarmate meer en meer nieuwe ontwerpers HTML en CSS leren, zullen uw vaardigheden bij het bouwen van tabellay-outs steeds minder gevraagd zijn. Ja, het klopt dat klanten u doorgaans niet de exacte technologie vertellen die u zou moeten gebruiken om hun webpagina's te bouwen, maar ze vragen wel dingen als:
- Toegankelijke webpagina's: ontwerpen die kunnen worden bekeken door schermlezers worden door veel landen verplicht gesteld en bedrijven vinden toegankelijkheid elke dag steeds belangrijker.
- Onderhoudbare webpagina's: ontwerpen die ze kunnen meenemen, zelfs als je ze in de toekomst niet meer onderhoudt.
- Flexibele ontwerpen: ontwerpen die in veel browsers, resoluties en apparaten werken.
- Snel downloaden van pagina's: snelheid wordt steeds belangrijker, zelfs voor SEO.
- Afdrukbare ontwerpen: pagina's die zonder speciale scripts of extra pagina's worden afgedrukt.
Als je niet kunt leveren waar de klanten om vragen, zullen ze niet langer naar je toe komen voor ontwerpen - periode. Kunt u het u echt veroorloven om uw bedrijf te laten lijden, omdat u niet bereid bent om een techniek te leren en deze op te nemen die sinds eind jaren negentig in gebruik is?
De moraal: leer CSS te gebruiken
CSS is misschien moeilijk te leren, maar alles wat de moeite waard is, is de moeite waard. Zorg ervoor dat je vaardigheden niet stagneren. Leer CSS en bouw uw webpagina's zoals ze bedoeld zijn - met CSS voor lay-out.
