Waarom lay-outen met tabellen dom is:

problemen ontleed, oplossingen aangedragen

Tabellen bestaan binnen HTML hierom: Het tabulair weergeven van gegevens. Echter, border="0" maakte het voor ontwerpers mogelijk om plaatjes en teksten te plaatsen op een raster. Terwijl tabellen vandaag de dag het belangrijkste hulpmiddel zijn om visuele en grafische websites te bouwen staan ze het opzetten van betere, meer toegankelijke, flexibele en functionele websites in de weg. Ontdek waar de problemen vandaan komen en leer hoe websites op te zetten gedeeltelijk of geheel zonder tabellen.

Cheeeffff!

Zitten er "stropdassen" in de zaal? Zo niet, haal ze er dan snel bij. Zij zijn de mensen die moeten weten dat webstandaarden het bedrijf geld kunnen besparen.

Overzicht: Wat heb ik eraan?

We introduceren een nieuwe manier van werken die

• de pagina's sneller doet laden
• de kosten voor hosten zalverlagen
• het aanpassen van uw ontwerpen effici?nter en minder duurzal maken
• u helpt bij maken van websites die er consistenter uit zien
• betere zoekresultaten oplevert in zoekmachines
• uw websites toegankelijker maakt voor alle browsers en user agents
• u een voorsprong geeft omdat wereldwijd steeds vaker de Web standaards gebruikt worden.

We hebben het ook over het feit dat het weergeven van pagina's met Cascading Style Sheets (CSS) een iets andere denkwijze vereist over inhoud en opmaak.

Websites om van te gillen: geneste tabellen en spacer GIFs

In het begin werd het internet door academici, onderzoekers en defensie gebruikt om informatie te delen. Het duurde echter niet lang of slimmeriken hadden in de gaten dat dit nieuwe medium gebruikt kon worden om echt alles te verkopen, van tweedehands auto's tot snelle gimpen, van hondenbrokken tot onderbroeken.

Net als andere media kende ook internet de nodige kinderziektes. Het vroege internet was nauwelijks vormgegeven (en daardoor niet aanlokkelijk voor consumenten) totdat David Siegel het standaard boekwerk publiceerde met daarin enkele briljante 'workarounds' voor de beperking van toen aanwezige browsers en W3C specificaties (we hebben het dan over Netscape 2 en 3!).

Deze 'workarounds' waren zo handig dat ze zelfs vandaag nog de meestgebruikte manier zijn om webpagina's vorm te geven.

Problemen bij het gebruik van tabellen:

• De inhoud en het uiterlijk worden door elkaar gegooid.
  • Hierdoor wordt de bestandsomvang van de pagina's onnodig groot, omdat de bezoekers de gegevens over hoe de informatie getoond moet worden, telkens weer moeten downloaden, pagina na pagina.
  • Bandbreedte is niet gratis.
• Hierdoor wordt het herontwerpen van bestaande websites erg arbeidsintensief (en duur).
• Pagina's gebaseerd op tabellen zijn tevens veel minder toegankelijk voor gebruikers met een handicap en bezoekers die een GSM of PDA gebruiken.

De redding is nabij

Moderne browsers zijn veel beter in het toepassen van webstandaarden en we hebben de genoemde Middeleeuwse methoden niet meer nodig.

In plaats van het gebruik van tabellen in tabellen en toepassen van dummy GIFs, kunnen we veel eenvoudiger opmaken en CSS gebruiken om prachtige websites te lay-outen die sneller laden, makkelijker te onderhouden zijn en voor iedereen toegankelijk zijn.

De oplossing: CSS en gestructureerde opmaak

Door gestuctureerde opmaak te gebruiken in onze HTML-documenten en Cascading Style Sheets voor de lay-out, kunnen we opmaak en structuur van elkaar scheiden.

Dit heeft verschillende voordelen ten opzichte van tabelgebruik.

Ontwerpen aanpassen is gemakkelijker en goedkoper

Door het scheiden van de informatie over de opmaak en de inhoud zelf, wordt het aanpassen van bestaande pagina's veel minder arbeidsintensief (en veel goedkoper). Om de lay-out van een website aan te passen, volstaat het om de stylesheets onder handen te nemen. De pagina's zelf kan je ongemoeid laten.

Kijk bijvoorbeeld maar eens naar CSS Zen Garden, of de te veranderen stijlen op Eric Meyer's site. Meer informatie vind je ook op Alternative Style van Paul Sowden.

Bandbreedte is niet gratis

Het gebruik van webstandaarden verkleint de bestandsgrootte van uw pagina's, omdat niet keer op keer de informatie over de presentatie gedownload hoeft te worden. De stylesheets die de lay-out bepalen worden in het cache-geheugen van de browser bewaard.

Kleinere bestanden betekent sneller downloaden en besparing op de kosten van uw ISP.

Hé, deze pagina's lijken allemaal op elkaar!

Het gebruik van webstandaarden maakt het ook nog eens erg gemakkelijk om een consistent uiterlijk te handhaven doorheen de hele site. Omdat pagina's dezelfde stylesheets gebruiken voor hun lay-out, zien ze er hetzelfde uit.

Dit is goed voor uw handelsmerk en maakt uw website bruikbaarder.

Eenmalig schrijven, overal gebruiken, door iedereen

Het gebruik van webstandaarden maakt de pagina's veel toegankelijker voor gehandicapten en zij die GSM's en PDA's gebruiken.

Bezoekers die schermlezers gebruiken (en mensen met trage verbindingen) hoeven niet door ontelbare (soms lege) cellen in tabellen en spacer GIFs te waden om bij de eigenlijke informatie op de pagina te komen.

Met andere woorden: het scheiden van de inhoud en de manier waarop die getoond wordt, maakt de inhoud apparaatonafhankelijk.

Google is blind

Over toegankelijkheid gesproken, het beperken van opmaak en het juiste gebruik van header tags helpt ook uw positie in de zoekresultaten.

Door de verhouding van de code tot de inhoud te verbeteren, het gebruik van trefwoorden in de header tags, en het vervangen van grafische kopjes met echte tekst, zal uw site ook beter geindexeerd worden.

Je mag wel tabellen gebruiken, maar met mate

Hierdoor krijgen bezoekers (en bazen) die tot hun dood vasthouden aan hun prehistorische versie 4-browsers, in ieder geval een idee van hoe de rest van de wereld de pagina's ziet.

Een fraai ogende tabel

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Neem eens een kijkje onder de motorkap

		Dit kan echt veel eenvoudiger.				Raad eens hoeveel opmaak er in deze kleine tabel zit? 13,7k. Er zitten 17 rijen en 9 kolommen in het ding. En dan heb ik het nog niet eens over de spacer GIFs.
		Hier zitten echt wel te veel tabelcellen en spacer GIFs in.				En alle gestreepte randen zijn gemaakt met het background attribuut op de tabelcellen wat dus niet toegestaan is. • Een geneste tabel? Waarom? • Om een opsommingsregel te maken? Je maakt een grapje, toch?
		Hetzelfde kan met 8 tabelcellen en 4 CSS regels.				Echt waar! 8 cellen en 4 CSS-regels, meer is niet nodig. • Oh nee, weer een verborgen tabel vermomd als lijst met opsommingen. • Waarom maak je de opsommingsregels niet gewoon op als opsommingsregels en laat je de rest over aan CSS?
		Je hebt een regel nodig voor <table>, een voor <td>, een voor <ul> en een voor <li>.				Da's alles. Als je die eenmaal hebt, zit je gebeiteld. • Da's veel beter dan 8 extra tabelcellen voor nep-opsommingen die ook nog eens minder toegankelijk zijn. • Fantastisch! De laastse nep-opsommingsregel...

De code die de structuur van de tabel toont:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

Veel beter

En hier is de nodige CSS Code om van die overtollige opmaak af te komen:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Overgangsontwerpen (transitional designs) samengevat

Gebruik margin en padding in plaats van extra cellen en spacer GIFs.

Gebruik link en @import styles. De eerste voor oude browsers, de tweede voor moderne browsers.

<link href=basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Voorbeelden:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

Maar wacht, er is meer:

Voor meer informatie over overgangsontwerpen, zie hoofdstuk 1 van Eric Meyer on CSS en Jeffrey Zeldman's Designing with Web Standards.

CSS lay-outs: de toekomst is nu

De meeste mensen gebruiken inmiddels een browser met goede CSS ondersteuning. Deze browsers hebben allemaal hun eigenaardigheden, maar zo gauw je aan ze gewend raakt, kun je de problemen omzeilen.

CSS coderen is eenvoudig. Zelfs voor iemand voor wie Javascript eruitziet als Chinees.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Elke CSS-regel heeft een selector en een declaratie. De declaratie is opgebouwd uit een kenmerk (property) en een waarde (value). Kenmerken die klinken alsof ze uit twee woorden bestaan bevatten een verbindingsstreepje.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Structurele opmaak: codeer wat je bedoelt, bedoel wat je codeert.

Terwijl het schrijven van de eigenlijke CSS code eenvoudig is, vergt het gebruiken van CSS voor de lay-out van je webpagina's een ietwat afwijkende manier van denken dan de meesten van ons gewend zijn.

In plaats van te denken 'Dit moet hier, en dat moet daar' terwijl we werken aan een pagina of opmaak, moeten we nu denken over het soort informatie op de pagina en welke structuur deze informatie heeft.

We geven de belangrijkste kop een <h1> tag; subkoppen worden gemarkeerd met <h2> tags, enzovoort; en paragrafen zijn paragrafen.

Deze manier van opmaken staat bekend als "structurele" of "semantische" opmaak.

In plaats van de inhoud in tabellen en tabelcellen te plaatsen, verpakken we ze in div elementen. Geef je div elementen een id of een class die beschrijvend is voor de inhoud en/of functie, in plaats van voor hun uiterlijk.

Vermijd <b>ed and <br>eakfast lay-out

Bedenk waarom je iets in een bepaalde opmaak wil zien; wat betekent dat? Je opmaak kan en zou betekenis moeten hebben, zelfs voor iemand die de pagina niet kan zien. Semantische opmaak maakt je pagina's toegankelijker voor iedereen, inclusief zoekmachines.

Als je iets cursief zet, is dat omdat je iets wil benadrukken (<em>) of omdat het de titel van een boek (<cite>) is.

Als iets vetgedrukt is, zou het waarschijnlijk opgemaakt moeten zijn als <strong>.

Als je een nieuwe regel na een tekstfragment wil, is de kans groot dat het als een kop opgemaakt moet worden. Als het geen kop is, is het dan een deel van een class die in de hele site voorkomt? Zo ja, dan gebruik CSS in plaats van <br>.

.foo {display:block}

Voor meer, zie Bed and BReakfast markup (B&BR) van Tantek Çelik.

What are nav bars?

Think about it: your navigation is actually an unordered list of links.

Mark them up inside <ul> tags.

• link1
• link2
• link3
• link4
• link5

Horizontale navigatiebalken

We kunnen CSS gebruiken voor de weergave van de links op onze pagina's.

Door display:inline te gebruiken, kunnen we horizontale navigatiebalken maken.

Hier is de code voor deze navigatiebalk:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Verticale Navigatiebalken

Hier is de code voor deze navigatiebalk:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

Voor meer informatie, zie Mark Newhouse's artikel, Taming lists, op A List Apart, en "Styling lists" op de CSS-Discuss wiki .

Dingen die tabellen beter kunnen dan CSS

Er zijn bepaalde dingen die met CSS minder goed lukken dan met opmaaktabellen.

Bijvoorbeeld, stel dat je een zwarte navigatiebalk aan de zijkant hebt, die je wil uitrekken over de hele hoogte van je inhoud. Met een opmaaktabel, is dat een fluitje van een cent: Geef de <td> gewoon een zwarte achtergrond.

Het kan ook met CSS, maar dat vergt een andere manier van denken.

Als we onze navigatie div een zwarte achtergrond geven, zal het zwart zich alleen uitstrekken totdat de navigatie "op" is. Op de meeste pagina's is de inhoud langer dan de navigatie, dus dat is niet goed.

In plaats daarvan zouden we een zwarte GIF in onze inhoud div kunnen plaatsen en deze div genoeg left padding geven, maar als onze navigatie langer is dan de inhoud, dan werkt dit ook niet.

Een andere manier om dit probleem aan te pakken is om een zwarte GIF op te stapelen in de achtergrond van de <body>, dat werkt uitstekend totdat je een ander plaatje als achtergrond van je <body> wil gebruiken.

Of, we verpakken de inhoud van de pagina in een 'wrapper' <div>, en stapelen het plaatje in die <div>. Echter, dat is weer niet-semantische geklopte lucht aan de markup toevoegen.

En bovendien werkt het opstapelen van achtergrondplaatjes niet wanneer je de breedte van je navigatie vloeiend wil hebben.

Zoals we al zeiden: sommige dingen doe je beter met tabellen dan met CSS. Maar op het eind moet je je afvragen of alle extra bagage die het gebruik van tabellen voor opmaak met zich meebrengt het wel waard is.

Migreren van tabelopmaak naar webstandaarden: het hele plaatje

Allereerst moet je een migratiestategie bepalen. Ga je de hele site ineens omzetten of pak je het stap voor stap aan?

Bepaal welke delen en pagina's de meeste baat hebben bij de conversie. Home pagina's, aankondigingen van nieuwe producten en soortgelijke pagina's zijn voor de hand liggende plaatsen om te beginnen.

Bepaal het type inhoud/informatie dat op je hele site voorkomt

• Productinformatie
• Prijzen
• Informatie over het bedrijf
• Portfolio
• Diensten
• Informatie voor investeerders
• Boodschappenwagentje
• Gebruikersforums
• Enzovoort

Je pagina's splitsen

Zo gauw je een idee hebt over de typen inhoud van je site, is het tijd om de bestaande pagina's te analyseren om een logische indeling van de inhoud te maken.

• Hoofdnavigatie
• Deelnavigatie
• Headers en footers
• Inhoud
• Gerelateerde informatie
• Andere

Zoek in je tabelstructuur naar geneste tabellen en lege en randcellen (we willen deze vervangen door <div> elementen of door een eenvoudigere tabelstructuur).

Haal het stof van je markup

Nadat je de structuur van je pagina’s onder de loep genomen hebt, wordt het tijd om een kijkje onder de spreekwoordelijke motorkop te nemen. Pluis uit welke presentatietags je door structuurtags kan vervangen.

• Gooi in hemelsnaam die <font> tags en spacer GIF’s overboord!
• Hetzelfde geldt voor de <b> en <br> tags.
• Maak korte metten met presentatietags voor tabellen (bgcolor, background en aanverwanten).
• Dump die <span> en <div> tags als er een structureel alternatief voor bestaat (dingen als <span class=”header”>). (Tantek Çelik vertelt er meer over in A Touch of Class.)

Vervang presentatietags door structuurtags

Je kan ‘Zoeken en vervangen’ (of reguliere expressies gebruiken), maar het is nog eenvoudiger om je bestaande pagina in een browser te openen, de tekst te kopiëren en vervolgens te plakken in je HTML-editor.

Verlies de structuur niet uit het oog! Het vervangen van <b> tags door <strong> tags is echt niet genoeg.

Wat is de belangrijkste titel? Markeer ‘m als een <h1> tag. Subitels markeer je als <h2> tags enzovoort. Voor paragrafen gebruik je <p> tags en van de navigatie maak je een ongeordende lijst met de <ol> tag.

Kies een DOCTYPE en gebruik het. Wij bevelen XHTML transitional aan. Tenzij je voor het zware werk wil gaan: dan is XHTML strict je ding.

Verdeel je pagina in logische div’s

Plaats je hoofdnavigatie in een div en gebruik ‘mainnav’ als id. De subnavigatie plaats je ook in een div en noem je ‘subnav’. Doe hetzelfde voor de footer en de content.

Misschien ontgaat het nut je, maar dat wordt snel duidelijk als je regels gaat toevoegen aan je style sheets.

Tijd voor CSS

Eerst geef je iedere div een randje. Bijvoorbeeld: div {border:1px dotted gray; padding:.5em}. Zo kan je zien waar ze starten en ophouden en of er sprake is van nesting.

Schrijf eerst je CSS voor element selectors (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.).

Gebruik zoveel mogelijk contextuele of in hiëarchie dalende (descendant) selectors. Zo blijft je markup duidelijk. Bijvoorbeeld: #subnav li{border:1px solid black; padding:.5em; display: inline}heeft enkel invloed op een opsomming binnen de div ‘subnav’.

Controleer het resultaat in zoveel mogelijk browsers. Schakel er desnoods je vrienden voor in.

Voorbeelden van websites die met CSS zijn vormgegeven

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Verdiep je in de materie

Op een uurtje kunnen we natuurlijk niet alles aan bod laten komen wat je moet weten over ontwerpen met CSS. Maar deze boeken vertellen je in detail hoe je webpagina’s compacter, begrijpelijker en sneller kan maken door je te houden aan webstandaarden.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Papier? Nee bedankt! On-linebronnen

CSS-Discussie

• mailing list: Erg actief, erg nuttig.
• Wiki: "De wiki doet ondermeer dienst als een collectief langetermijngeheugen voor lijstleden." Op zoek naar een techniek waar Internet Explorer zich niet in verslikt, maar pas echt tot z’n recht komt in betere browsers? Hier leer je hoe je eraan begint.
• Archief: Breek je je hoofd over een CSS-vraagstuk? Je bent vast niet de eerste die ermee worstelt en de kans is groot dat iemand eerder al een oplossing voor je probleem beadcht. En die vind je hier!

zeldman.com The Daily Report: Verhelderende artikels en interessante links die je inspiratie prikkelen.

A List Apart ‘Voor mensen die websites maken’

• Taming lists, Mark Newhouse. Een onmisbare bron die je helpt om je navigatie semantisch te structureren.
• CSS: Going to Print, Eric Meyer. ...en je hoeft nooit meer een ‘printvriendelijke versie’ te maken.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Laat je bezoekers bepalen hoe je pagina’s eruit zien.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Structurele markup helpt je ook om hogere posities te behalen in zoekmachines

The Web Standards project Deze mensen verdienen een standbeeld!

CSS: A guide for the unglued Een uitstekende pagina met links

CSS Layout Techniques: for Fun and Profit Lay-outs van Eric Costello die je voor je eigen projecten kan gebruiken. Daarnaast vind je er links en tutorials.

Real World Style CSS lay-outs, tips, trucs en technieken van Mark Newhouse.

DevEdge Netscape Sidebar Tabs Superhandige links naar de W3C-specificaties over CSS, HTML en de DOM.

The Business Benefits of Web Standards Leesvoer voor moderne zakenlui! Het evangelie van webstandaarden, in bewoordingen die ook een verkoper zal doen watertanden.

Bedankt. Zijn er nog vragen?