U bent hier:

  1. Handleiding
  2. Ontwikkeling
  3. Tabellen
  4. Lay-out
  5. Richtlijnen

Tabellen: Richtlijnen voor het gebruik van tabellen voor lay-out

Belemmerende factoren

Er kan sprake zijn van factoren die de migratie naar een volledige CSS-lay-out in de weg staan.

  • De kennis en ervaring van de betrokken webontwikkelaars is ontoereikend
  • De om te bouwen site is te omvangrijk en maakt daarom het omzetten van de code te langdurig en te complex

Om aan de Webrichtlijnen te kunnen voldoen, is het gebruik van CSS voor lay-out echter vereist.

Bij het aanpassen van een bestaande website: gebruik CSS voor de presentatie en lay-out van webpagina’s en zie af van tabellen voor lay-out.

Richtlijn R-pd.11.8

Misverstanden over CSS voor lay-out

Er bestaan enkele misverstanden over wat een CSS-lay-out is. Deze misverstanden lijken zich vaak voor te doen wanneer webontwikkelaars overschakelen van het gebruik van tabellen voor lay-out naar CSS (Cascading Style Sheets).

Een CSS-lay-out is de term voor een webpagina met louter structurele, betekenisvolle markup, waarvan de vormgeving wordt bepaald door een gekoppeld CSS-bestand.

De ideale situatie – volledige scheiding tussen structuur en vormgeving – is in de praktijk niet altijd mogelijk. Toch moeten webontwikkelaars hier wel naar streven. Er zijn tussenoplossingen mogelijk, zoals tabellen voor lay-out waarvan de specificaties voor de kolommen – breedte, kleuren, lettertypen – in een CSS-bestand geplaatst zijn.

Wat een CSS-lay-out niet is

Webontwikkelaars spreken nog wel eens over een DIV-lay-out. In de broncode is alle tabel markup vervangen door div markup. Soms is zelfs nagenoeg alle markup vervangen door div elementen. Het div element is een element waarvan de betekenis neutraal is. De markup van een document moet juist zoveel mogelijk de inhoud beschrijven.

Met de huidige technieken en mogelijkheden van browsers is onderstaande richtlijn overbodig geworden.

Bij het gebruik van tabellen voor lay-out: gebruik niet meer dan één tabel en gebruik zoveel mogelijk CSS voor de vormgeving van deze tabel.

Richtlijn R-pd.11.9

Houd de tabel-markup zo eenvoudig mogelijk

Pas niet meer cellen toe dan nodig en splijt deze cellen niet zonder meer op. Geef alleen simpele kolommen en rijen aan. Laat de vormgeving van de inhoud van de cellen (kopregels, paragrafen, enzovoort) over aan CSS.

Pas geen toegankelijkheidsmarkup toe

Gebruik in een tabel voor lay-out geen elementen en attributen die bedoeld zijn om een tabel met relationele informatie toegankelijk te maken. Gebruik enkel td cellen en geen th, caption en summary elementen, of headers en scope attributen. Dergelijke toegankelijkheidsmarkup werkt namelijk belemmerend voor bezoekers die baat hebben bij toegankelijke tabellen.

Bij het gebruik van tabellen voor lay-out: pas geen toegankelijkheidsmarkup toe.

Richtlijn R-pd.11.10

Let op de volgorde van de inhoud

Tabellen voor lay-out hebben als nadeel dat de markup ervan over het algemeen bepaalt in welke volgorde de inhoud in de broncode moet staan. Een gebrekkige volgorde van de inhoud in de broncode kan een belemmering zijn voor zoek-spiders en blinde bezoekers. Zie ook Goede volgorde: lange navigatielijsten na de hoofdinhoud.

Gewoonlijk zou de markup voor een tweekoloms tabel lay-out er als volgt uitzien:

Markup voor een gewone tweekoloms tabel (HTML)

<table>
  <tr>
    <td>Hoofdnavigatie</td>
    <td>Hoofdinhoud</td>
  </tr>
</table>

Door slim gebruik te maken van het rowspan attribuut kan een webontwikkelaar een tabelcel die in de lay-out visueel eerst komt (hoofdnavigatie), in de broncode na een andere cel (hoofdinhoud) laten voorkomen.

Markup voor een tweekoloms tabel waarbij twee cellen zijn ‘omgedraaid’ (HTML)

<table>
  <tr>
    <td></td>
    <td rowspan="2">Hoofdinhoud</td>
  </tr>
  <tr>
    <td>Hoofdnavigatie</td>
  </tr>
</table>

Links en referenties

(uitleg)


 Webrichtlijnen versie 1.3, november 2007.