Webrichtlijn 72: Tabellen voor relationele informatie
Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out. (R-pd.11.1)
Zojuist is er weer een hevige discussie over het gebruik van tabellen voor layout losgebarsten. Dat kunnen wij natuurlijk ook, met deze richtlijn!
Wie is het eens met de stelling "CSS should be used for styling, tables should be used for layout"? Zit wel wat in, toch? :-)
Gaan CSS tables (display: table;, etc.) een einde maken aan deze discussie, of heeft dat hetzelfde probleem? Het idee is toch dat je markup en layout van elkaar wilt scheiden? Is het volgende echt zoveel beter dan een table layout?
<style>
#main { display: table-row; }
#nav { display: table-cell; }
#content { display: table-cell; }
</style>
<div id="main">
<div id="nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/over">Over</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div> <!-- #nav -->
<div id="content">
<h1>Over</h1>
<p>Over ons...</p>
<p>Etc.</p>
</div> <!-- #content -->
</div> <!-- #main -->Hiermee zit je toch net zo vast aan je layout als met het volgende:
<table>
<tr>
<td>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/over">Over</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</td>
<td>
<h1>Over</h1>
<p>Over ons...</p>
<p>Etc.</p>
</td>
</tr>
</table>Maar nu even zonder gekheid: wie weet er überhaupt nog hoe je tabellen gebruikt voor layout? Moet je deze discussie ooit nog aangaan in je werk, en zo ja, welke argumenten hoor je daar?
Reacties
- 1 ppk op 03-02-2009 om 16:10 uur:
- Het grote probleem bij CSS Tables is dat je weer gedwongen wordt je content in die volgorde te plaatsen die afgedwongen wordt door je layout. Alleen al daarom voel ik weinig voor een heropening van deze discussie.
Echte tabellen en float-based layouts hebben overigens hetzelfde probleem. Alleen absolute positionering omzeilt dit.
Daarnaast, als we, zoals het hoort, tabellen alleen gebruiken om tabulaire data te tonen, hebben display: table en vriendjes dan nog wel zin? Als je een tabel nodig hebt, heb je echt een tabel nodig, en geen CSS die dat nadoet.
Kortom, wat mij betreft is dit een non-discussie en moeten we gewoon verder gaan zoals we het nu doen. - 2 Sander A op 03-02-2009 om 19:01 uur:
- Volgens mij is er wel degelijk een verschil tussen de 2 voorbeelden. Met HTML markeer je immers de contenttypen en juist die markering is hier verschillend. Bij een echte old-school table layout zou het menu natuurlijk wel over 3 TR's verspreid staan en de content in een TD met rowspan=3 ;)
Of display:table-cell; en co. de uitkomst zijn voor layout vraag ik me af. Een enkele keer misschien, wanneer visueel gezien kolommen en rijen wel gerelateerd zijn, maar inhoudelijk niet.
Met de advanced layout van CSS3 krijgen we overigens een veel uitgebreidere mogelijkheid om volgens tabel-'achtig' grid te bouwen, waarbij de volgorde van de code ook nog eens niet leidend is.
Overigens is het ook met echte tabellen mogelijk om bv. kolommen van links naar rechts te verplaatsen, enkel met CSS (moest onlangs helaas een redesign doen op een table layout waarbij ik geen invloed had op de HTML, blèh). - 3 Marc op 03-02-2009 om 21:38 uur:
- @ppk: Het is niet waar dat alléén absolute positionering het probleem omzeilt dat je html-structuur de volgorde van je layout moet volgen. De holy grail methode, ons allen wel bekend denk ik, is daar een voorbeeld van. Hierin komt de content in de html-structuur voor de sidebars.
Overigens is deze methode ook niet zonder nadelen: de CSS code die je ervoor nodig hebt, is op het eerste gezicht onbegrijpelijk. Het is eerder een elegante workaround dan een CSS-layout-utopia... maar wat mij betreft nog steeds veel beter dan table layouts. - 4 Stephen Hay op 04-02-2009 om 12:35 uur:
- CSS tables zijn voor tables, en tables zijn voor tabular data, en het is belachelijk om te denken dat omdat het CSS is, dat het ineens een goede oplossing is voor layout. Zelfde fout, andere smaak.
Positioning is goed voor layout, tables zijn goed voor tabular data. CSS tables voor layout forceert vreemde source-code volgorde en alweer vaak extraneous HTML.
Advanced layout module biedt mogelijkheden voor de toekomst, en in de tussentijd doen kundige ontwikkelaars het goed door geen layout-technieken toe te passen waardoor die layout weer volledig HTML-afhankelijk wordt. - 5 Sander A op 04-02-2009 om 15:42 uur:
- @Stephen:
Dat lijkt me toch wat kort door de bocht. Je layout is immers altijd afhankelijk van je HTML, want dat is het enige waarnaar je CSS-selectors kunnen verwijzen.
Je kunt geen abstract design tonen door direct naar een CSS-bestand te verwijzen (zou wel leuk zijn overigens, maar da's meer iets voor een andere discussie). CSS is altijd toegepaste vormgeving, en wel toegepast op de HTML of andere markeertaal.
Kortom: zonder markup geen layout. - 6 Tom op 04-02-2009 om 21:24 uur:
- Ja, ik gebruik nog tabellen voor layout - de hemel moge mij halen - voor die vermaledijde emailnieuwsbrieven... :(
- 7 Sander A op 04-02-2009 om 22:07 uur:
- Email-Standards.org to the rescue!
- 8 Stephen Hay op 04-02-2009 om 23:15 uur:
- @Sander: Ik bedoel niet dat je géén markup nodig hebt. Ik bedoel dat je markup betekenisvol dient te zijn voor de structuur van je inhoud (voor zover als dat mogelijk is binnen een gegeven situatie). CSS tables, tenzij ze juist gebruikt worden voor tables of elementen die om een bepaalde (uitzonderlijke) reden de kenmerken van tables moeten hebben, zorgen voor méér afhankelijkheid van markup dan nodig is.
@Tom: I know the feeling.