Tabellen == Div's

Door Frank62 op 17-02-2008 20:27

5.119 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

Leon Kunst

18-02-2008 15:49

Fieldsets vind ik sowieso gelikt om te gebruiken, omdat het er gewoon erg mooi uit ziet, zo'n stukje text met daarom heen een mooi streepje :)

Frank62

18-02-2008 21:05

@Leon:

"De TS weet nu dat ie er naast zat."
>> Remember Jonathan, Leon? Hoogmoed komt voor de val. Morgen/overmogen meer.

Frank -

18-02-2008 21:11

Frank62 schreef op 18.02.2008 21:05
Morgen/overmogen meer.

Kom dan eerst maar eens met feiten en goede voorbeelden. Voorlopig heb je alle schijn tegen!

Robert Deiman

18-02-2008 21:15

Wat jij beweerd is dat je met Tabellen hetzelfde kan als met Divs -> Dat is niet waar, dat bewijs is al geleverd in dit topic. Jij zegt daarnaast dat de load voor tabellen net zo is als die voor Divs, ook dat is niet waar, met divs heb je sowiezo al minder code nodig.

Jij begint daarnaast over Iframes in je tabel -> Ooit van SEO gehoord, daarvoor zijn frames per definitie al niet zeer geschikt. Ben wel benieuwd met wat voor dingen je nu aankomt, maar laat het feiten zijn, daar kunnen we wat mee. Tot nu toe lijkt het meer op sentimentaliteit, naar de (volgens jou!) "goede oude tabellen tijd", waarin je zelf nog een lay-out kon maken.

Jan Koehoorn

18-02-2008 21:19

[offtopic]
Ik zie dat ik mijn forms ongeveer style zoals Stu. Grappig! Wat ik bovendien nog met labels doe is dit:
label {cursor: pointer;}
Op die manier ziet de user dat je op een label kunt klikken.
[/offtopic]

Robert Deiman

18-02-2008 21:21

[offtopic]
En wij maar denken dat je het zelf had bedacht :P Maar stiekum van Stu. afgekeken zeker.
Zelf gebruik ik ook "jouw" manier (of die van Stu. ) om m'n formulieren op te maken. En inderdaad wel even de cursor aanpassen zodat het voor een bezoeker ook duidelijk is.
[/offtopic]

Frank -

18-02-2008 21:23

@Jan: Ik heb ook eerst op jouw site gezocht, ik meende dat jij ooit een voorbeeld had gemaakt met uitleg, maar kon deze niet terugvinden.

Maar goed, Stu levert ook goed werk.

Jan Koehoorn

18-02-2008 21:25

Stu is the best! En, eerlijk, mijn manier had ik zelf verzonnen. Voor de volledigheid nog de tut: formulieren stylen met CSS

Wouter K

18-02-2008 21:53

Ben het gezeur moe hier.
Heb nooit of nooit echt met tabellen begonnen en weet nog steeds niet hoe het moet :p..
Grtz

Frank62

20-02-2008 15:25

Of tabellen of div's makkelijker werken is om een layout te ontwerpen, dat is subjectief. (@Kalle: moet ik nou echt een layout hier posten met allemaal lege div's zonder id's om te bewijzen dat dat geen reet uitmaakt? Get real!) End of story. Layouts veranderen is een ander punt, maar daarover later meer.

Ik heb een vijftal argumenten genoemd waarom div's-layout niet principieel beter is dan tabellayout. Die zal ik verder uitwerken/verdedigen.

1. Er is een veel betere manier om layout en content te scheiden.
Er zijn twee principiële manieren om een layout te maken die je later makkelijk kunt veranderen: (a) geïntegreerde pagina's die bestaan uit div's + één extern stijlblad, en (b) een parentfile waarin steeds andere content wordt geladen.

In beide methodes hoef je in principe maar één bestand (hooguit een paar) te veranderen om een site van 200 pagina's in één keer een nieuwe look te geven. Maar wat als je iets aan de layout wilt toevoegen, of er iets van wilt verwijderen? Juist. Dat gaat niet met methode a. In ieder geval niet iets toevoegen. Zengarden of geen zengarden. En dat gaat wel met methode b. Verder is het verschuiven van div's (methode a) aan beperkingen onderhevig. Je kunt niet willekeurig elke andere layout maken met slechts het veranderen van een extern stijlblad.

De intelligente lezer die niet meteen op tilt slaat zal dan ook zien dat met de komst van server-side scripting includes, aangewend om content te includen, methode a een obsolete methode is geworden.

Je kunt het parentfile in method b heel goed met div's maken, maar dat hoeft maar in een paar gevallen. In veel andere gevallen kun je gewoon een tabel gebruiken, als je dat wilt. (Wel een DTD 4 Transitional zonder url gebruiken, omdat in IE anders de 'liquiditeit' van een tabellayout verloren gaat.)

2. De vraag of tabellen bedoeld zijn voor layout is irrelevant.
Hier is weinig kritiek op gekomen. Op de stupide uitlatingen van een paar pubers na, maar mensen met communicerende hersenhelften zullen gezien hebben dat de kracht van hun tegenargumenten 0,000 was. Zo ze al tegenargumenten aanvoerden.

3. Pagina's met een tabellayout worden niet significant langzamer gedownload en gerenderd dan pagina's met div's-layout.
Onder andere door "moderator" Deiman wordt dit te vuur en te zwaard bestreden. (De aanhalingstekens zijn omdat je precies het tegenovergestelde doet van wat een moderator moet doen: ongenuanceerd stelling nemen en mensen die over de schreef niet of nauwelijks excuses laten aanbieden c.q. hen niet uitsluiten.)

Maar heeft Robert Deiman ooit wel eens gekeken naar bestandsgroottes van basale layouts? Duidelijk niet, en roept hij maar wat, want de volgende twee - qua resultaat precies dezelfde - voorbeelden laten zien dat tabellayout NIET meer bytes vergt dan div's-layout:


<!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!!

4. Zoekmachines indexeren pagina's met tabellayout net zo goed als met div's-layout.
Daar is in zoverre kritiek op gekomen, dat Robert Deiman hier wederom laat zien dat hij slecht op de hoogte is, als hij stelt dat SEO met iframes (die ik soms gebruik om content te 'includen') niet gaat. Google indexeert losse frames net zo goed als geïntegreerde pagina's, en er zijn meerdere manieren om te zorgen dat contenfiles altijd in het parentfile wordt getooond, één waarvan mod_rewrite.

5. Voor screenreaders is een veel mooiere oplossing dan div's-layout.
Hiervoor geldt hetzelfde als punt 2.

De lezer (met grijze massa!) oordele.

- Frank

PS: @Lode: als je geen terzake doende argumenten kunt verzinnen, ga dan lekker buiten spelen!

Edit: .htaccess => mod_rewrite

Reageren

Inloggen om te reageren