Tabellen == Div's

Door Frank62 op 17-02-2008 20:27

5.114 views

Zoals beloofd, een nieuwe draad over de vraag of tabellen principieel beter zijn dan div's, voor layout.

De volgende argumenten laten zien dat dat niet het geval is:

1. Er is een veel betere manier om layout en content te scheiden.
Div's-layout (niet te verwarren met CSS-layout want tabellen zijn ook te stijlen met CSS) is ontworpen om layout en content te scheiden, zodat men slechts één of hooguit een paar bestanden hoefde te veranderen als de site een nieuwe layout behoefde. Daarmee voorzag het in een grote behoefte, want 30 of meer pagina's op dezelfde manier verbouwen was een zeer geestdodende taak.

Echter, daar is inmiddels een nog veel mooiere methode voor ontwikkeld: server-side includes (SSI's). Met SSI's kunnen niet alleen navigatiemenu's maar ook content-files geïncludeerd worden. In gewoon Nederlands betekent dit dat men één moederpagina aanmaakt, inclusief navigatiemenu, waar telkens andere inhoud in geladen wordt. Voor de layout van zo'n moederpagina is het niet nodig om div's te gebruiken. Dan kan ook met tabellen.

Het is een illusie - zeker ingeval van geneste div's - om te denken dat met slechts het veranderen van het externe stijlblad met div's-layout elke andere layout voor de hele site bereikt kan worden. Daar zitten grote beperkingen aan.

En wat als men halverwege de 30 te maken geïntegreerde div's-pagina's (de 'oude' manier) iets wil toevoegen? Dan moet men alsnog 15 pagina's gaan aanpassen, terwijl men een div's-layout heeft...

Deze moeilijkheden gelden niet als men het systeem van server-side content includes gebruikt. De moederpagina waarvan meestal net zo goed uit een tabellayout mag bestaan.

2. De vraag of tabellen bedoeld zijn voor layout is irrelevant.
Waar het om gaat is of een methode gelijkwaardige resultaten oplevert, en of hij webmastervriendelijk is. Tabellen en div's leveren niet precies dezelfde resultaten op. In sommige gevallen kan een layout alleen met div's gemaakt worden, als men een overzichtelijke, intuïtieve code wil houden. Maar het omgekeerde geldt evenzeer.

Bovendien bestonden tabellen al ruim vóórdat div's ontworpen werden, en heeft men jarenlang layouts gemaakt met tabellen zonder dat er een haan naar kraaide.

Tot slot van dit argument zijn er twee soorten tabellen: de normale tabellen, ook geschikt voor vele layouts, en de tabellen speciaal geschikt voor tabulaire data. De laatste kenmerken zich door het opgebouwd zijn uit o.a. <thead>, <tbody>, <tfooter> en <caption>.

3. Pagina's met een tabellayout worden niet significant langzamer gedownload en gerenderd dan pagina's met div's-layout.
Verhalen over dat oude computers vastliepen op pagina's met geneste tabellen kunnen genegeerd worden, omdat er toen nog geen div's bestonden, en er geen enkele reden is om te geloven dat die computers niet net zo zeer vastgelopen zouden zijn op geneste div's.

4. Zoekmachines indexeren pagina's met tabellayout net zo goed als met div's-layout.
Voor zoekmachines zijn tabellen tabellen. Of die nu voor layout of tabulaire data gebruikt worden, de inhoud wordt net zo goed geïndexeerd en gevolgd.

5. Voor screenreaders is een veel mooiere oplossing dan div's-layout.
Een bijkomend voordeel van div's-layout t.o.v. tabellayout was dat de site sneller te lezen was met screenreaders. Echter, met de volgende methode zullen de blinden nóg gelukkiger zijn:

* Neem in de summary van de layouttabel de volgende tekst op: "Deze tabel is een layouttabel. Voor screenreaders is een aparte introductie- en navigatiepagina gemaakt. Het adres is (de URL)."
* Op die navigatiepagina, die alleen platte tekst bevat, schrijf je hoe de site is opgebouwd als dat nodig is, en geef je directe links naar de content-files, die ook weinig meer dan platte tekst hoeven te bevatten.

Er kan dus geconcludeerd worden dat de kruistocht tegen tabellen gestaakt kan worden, en dat div's-layout niet principieel beter is dan tabellayout.

- Frank

Lode

21-02-2008 09:11

Jan Koehoorn schreef op 17.02.2008 23:54
[quote='Lode schreef op 17.02.2008 23:32']@jan
Zou nog wel kunnen... of ik het wil proberen is een 2e...

Hoi Lode,

de vraag was niet aan jou gericht maar aan de TS. Toch ben ik wel geïnteresseerd in je antwoord. Je hoeft het niet letterlijk na te bouwen. Ik wil alleen weten hoe je het aan zou pakken. En uiteraard ben ik ook benieuwd naar het antwoord van de TS.[/quote]

Heel veel html... backround images z-index'en 1x1 transparante gifjes om te spacen... Je zal een hoop capriolen moeten uithalen iig denk ik...
IK heb met tabellen tot 2004 ofzo aardig complexe sites gemaakt iig... tot ca. 60 a 70kb aan html/css voor 1 pagina. En dat is dan exclusief images en javascripts... :-S
Maar zoals ik al aangaf is voor mij voltooid verleden tijd gelukkig...

Jan Koehoorn

21-02-2008 09:12

Jelmer levert een zeer positieve bijdrage, ondersteund met argumenten. Reden genoeg om dit topic open te laten.

@ de nieuwe leden: a.u.b. niet vragen om slotjes in een topic.
[edit]@ jacco: oude leden zouden beter moeten weten ;-)[/edit]

Frank -

21-02-2008 15:00

Frank62 schreef op 20.02.2008 15:25


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<style type="text/css">
#grandContainer { 
	width: 800px;
	height: 500px;}
.allContainers { 
	float: left;
	border-style: solid;
	border-color: black;}
#logoContainer {
  width: 150px;
	height: 100px;
	border-width: 1px;}
#headerContainer { 
	width: 647px;
	height: 100px;
	border-width: 1px 1px 1px 0;}
#menuContainer { 
	width: 150px;
	height: 397px;
	border-width: 0 1px 1px 1px;}
#contentContainer { 
	width: 647px;
	height: 397px;
	border-width: 0 1px 1px 0;}
</style>
</head>
<body>
<div align="center">
   <div id="grandContainer">
      <div class="allContainers" id="logoContainer"></div>
         <div class="allContainers" id="headerContainer"></div>
         <div class="allContainers" id="menuContainer"></div>
       <div class="allContainers" id="contentContainer"></div>
    </div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
table { 
	width: 800px;
	height: 500px;
	border: 1px solid black;
	border-collapse: collapse;
	table-layout: fixed;}
td { 
	border: 1px solid black;}
</style>
</head>
<body>
<center>
<table>
  <tr>
    <td id="logoCell" width="150" height="100"> </td>
      <td id="headerCell"> </td>
        </tr>
        <tr>
      <td id="menuCell"> </td>
    <td id="contentCell"> </td>
  </tr>
</table>
</body>
</html>

Uitslag: 907 bytes voor de div's, 538 voor de tabel!! En dit is een doodnormale layout!!

En wanneer je de css in een extern stylesheet zet, wat voor de hand ligt, krijg je ineens hele andere cijfers. Tuurlijk, de eerste keer dat je de pagina bezoekt, moet ook de stylesheet worden gedownload, maar vervolgens staat deze in de cache en gaat het dus flink in kb's schelen!

Waarom je alle div's zowel een id als een class meegeeft, is mij onduidelijk. In css kunnen tags overerfen van elkaar, dat maakt de boel eenvoudiger en korter in de syntax.

Frank62

24-02-2008 16:03

Jelmer,

Omdat je een paar nieuwe argumenten aanvoert en een normale toonzetting hebt, maak ik een uitzondering en reageer ik nog een keer.

Je eerste drie alinea's gaan over wat makkelijker is: div's of tabellen. Dat is persoonlijk, maar duidelijk is dat de overgrote meerderheid van webmasters div's vééél moeilijker vindt. Hoe anders is het te verklaren dat vragen over layout 9 van de 10 maal div's betreft?

Wat ik er verder nog over wil zeggen is dat ook ik soms div's gebruik, omdat het soms gewoon niet kan met tabellen. Bijvoorbeeld als je qua uitlijning verspringende cellen wilt zonder gebruikt te moeten of kunnen maken van colspan. Ik heb dat ook steeds gesteld, dat je soms div's moet gebruiken.

Je stelt: "Voordeel van CSS & divs is dan weer dat je met een tooltje als CSSEdit (Mac) of eventueel Firebug kan uitproberen om hem goed te krijgen, zonder te hoeven schuiven met de inhoud van je bestanden." Je kunt echter met Firebug ook hele tabellen schrijven in de HTML. Als je dat zou willen, want voor echte tryouts gebruikt je natuurlijk gewoon een volwaardige editor als (X)HTML Kit.

Over of tabellen niet voor layout bedoeld zijn zeg je: "Ik ken een aantal bedrijven die (succesvol) webrichtlijnen als uitgangspunt hebben en daarmee ook hun klanten lekker maken." Maar dat is de omgekeerde wereld! Ik zou als klant flink pissig worden als ik achteraf zou leren dat ik veel te veel voor een website heb betaald doordat de maker me heeft voorgeschoteld dat de layout met div's gemaakt moet worden! "Behandel een ander zoals je zelf behandeld wilt worden."

Verder:

"Safari 3 zal bijvoorbeeld een div automatisch als 'container' voor een webclip gaan zien, terwijl een tabel niet automatisch gepakt wordt."
>> Ik ben er van overtuigd dat dat soort technieken een of andere elementidentificatie behoeven om daartoe over te gaan, en dan zowel een div als een tabel zullen parsen/renderen als zodanig. En als dat al niet het geval zou zijn, zou het hooguit een toegevoegd punt worden op het - verder zeer korte - lijstje van omstandigheden waaronder je div's moet gebruiken.

"Navigatie wil je immers altijd bovenaan hebben"
>> Het spijt me zeer, maar dat vind ik grote onzin. Google doorzoekt gewoon de hele pagina. En rankt jouw site hoger dan andere als meer sites naar de jouwe linken. De rest is allemaal gepiel in de marge.

Je vergelijking van mijn screenreaderoplossing vind ik superflauw. Ik voer een perfecte oplossing aan, waar blinden enorm blij mee zullen zijn, en het is een kwartiertje werk voor een beetje webmaster.

Div's moeten gebruiken, zoals hier steeds gesteld wordt, is dus gewoon fundamentalisme c.q. egocentrisme ("ik kan het, als een vn de weinigen, en nu moet de hele wereld het doen want dan kan ik op een voetstuk staan"). En we weten allemaal waar dat toe leidt.

M Ypma

24-02-2008 16:52

@Frank62
Als ik eerlijk ben wordt ik echt een beetje bang van uw manisch gedrag over tabellen.

Tom

24-02-2008 16:56

zucht.... wie is er nog zo retarded om met tabellen te gaan werken? Blijkbaar is het gewoon een gebrek aan kennis, zoals al hierboven vermeld is.

Ik ken tegenwoordig vrijwel geen websites meer met tabellen, misschien dat tabellen zichtbaar zijn in de content die geladen wordt. De lay out van velen websites tegenwoordig zijn toch echt DIV's ;)

Verdiep je voortaan eventjes... Voorkomt ellenlange topics als deze :p waar uiteindelijk niks nuttig uitkomt. Nja veel plezier met je tabellen iig :D

PHP Newbie

24-02-2008 17:14

@Frank62

Zoals al een aantal keer gevraagd ben ook ik zeer benieuwd naar je hoeveelheid kennis van CSS, HTML en PHP. Hoeveel ervaring heb je met deze 3 talen?

Reageren

Inloggen om te reageren