Tabellen == Div's
Dat iemand een mening heeft en deze graag wil verkondigen, ik heb daar zelf ook wel eens last van..., dat is leuk en aardig, maar kom wel met echte argumenten en echte voorbeelden van dagelijkse praktijk.
Kortom, ik zit nog steeds te wachten op échte voorbeelden. Komen die niet, dan weet ik genoeg, mijn kennis is dan nog steeds helemaal up-to-date.
Ik herhaal (nog) één keer wat ik al geschreven heb, en dan stop ik met deze discussie. Enkele woorden doe ik dikgedrukt, want jullie kunnen het klaarblijkelijk anders niet goed lezen:
<repeat>
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.
</repeat>
De rest is een kwestie van logisch redeneren en/of redelijk zijn. Ik ga dat echt niet allemaal voorkauwen, want jullie durven de stukken van tegenstanders toch niet normaal door te lezen, dus dat zou ik dan voor niets doen.
Geluk met je al weer achterhaalde layoutmethode!
- Frank
Gewijzigd op 01/01/1970 01:00:00 door Frank62
Verdiep je nog maar eens in Divs en CSS. Je kan een div positioneren waar je wil, zelfs BUITEN de zichtbare Lay-Out. Iets toevoegen kan met DIVS net zo gemakkelijk (lees mijn reactie nu eens, dan had je dat ook geweten)
Logisch redenerend heb je met divs meer vrijheid, en ook meer mogelijkheden voor je layout. Hou jij het maar lekker bij je tabellen, als je daar gelukkig van wordt. Jij vind het prettiger, omdat je divs blijkbaar niet snapt (zie wederom mijn vorige reactie op jou) Dan moet je dat lekker blijven doen, maar probeer anderen die het WEL op de manier volgens de standaarden proberen te leren, en de mensen die hen dat op de standaard manier proberen te leren, dan met rust te laten en niet te overtuigen van jou "foute" (andere/ alternatieve, niet voldoen aan de standaard) methode.
Ten eerste: waarom zouden wij naar je luisteren? Je WEIGERT zelf naar ons te luisteren, en dan zeg je ook nog eens dat wij NIET willen LUISTEREN! Omgekeerde wereld noemen kleine kinderen dat.
Ten tweede: heb je onze reacties niet gelezen? Al jouw opmerkingen zijn al ontkracht. Over de beperkingen van het veranderen van de layout zonder de DIV structuur te veranderen: wees nou niet zo stronteigenwijs en kijk even naar CSS Zen Garden. Dat zijn allemaal andere layouts, met precies dezelfde DIV/HTML structuur.
Ten derde: ik vind je vreselijk kinderachtig. Nu ga je vast zeggen dat mensen naar mijn eerste reacties moet kijken, hoe kinderachtig ik wel niet ben, maar jij bent kinderachtig op een andere manier.
Ten vierde: kijk eens naar een grote website, of die DIV's of tabellen gebruiken: Microsoft.com: DIV's!!! En meneertje meent dat die mensen bij Microsoft domme lullen zijn, die niet weten hoe HTML werkt? Of is meneer een MS-hater? Kijk dan naar Apple.com, DIV's!!! Of is meneer zo'n Linux-type? Ubuntu.com, DIV's!!! Heb je nog wat te zeggen verder?
Nu ik zo veel zin krijg om je uit te schelden, druk ik snel op [Plaats bericht] voor ik het echt ga doen...
Gewijzigd op 01/01/1970 01:00:00 door - -
Zengarden toont bv. aan dat content en layout uitstekend zijn te scheiden dankzij div's. Dé eis aan een layout, is dat je niks aan de html-code mag veranderen om toch een (compleet) andere layout te maken. Dat is iets wat je met tabellen echt niet gaat lukken.
Geef nu eens echt een paar goede voorbeelden van populaire websites die zijn gebouwd zoals jij dat hier beschrijft. Desnoods bouw je zelf een site, wie weet wordt het een succes en kun je ons ook overtuigen van jouw goede idee.
Succes!
Ps. Die screenreader kun je beter vergeten, dat was toch echt een misser ;)
1) uiteindelijk tegen het rekenwerk aanloopt. Het aantal velden moet in iedere regel gelijk zijn, of je moet bezig met colspan en rowspan. Wil je inhoud gaan toevoegen, en zit je met een redelijk grote en complexe pagina (ik denk aan de voorpagina van bijvoorbeeld Yahoo) dan levert dit je waarschijnlijk net zoveel hoofdpijn als CSS hacks & margin, padding en 100% horror.
2) Krijg je een probleem, zoals dat de velden niet op de plek vallen waar jij ze verwacht, dan is dat lastig op te lossen. Je moet of gaan gokken, of je hele tabel opnieuw doorrekenen.
CSS en divs is ook niet pure glorie, en ook hier loop je tegen het probleem aan dat het lastig kan zijn om een div op de goeie plek te krijgen en dat fouten moeilijk naar een oorzaak te herleiden zijn. Maar dit is niet een reden om tabellen te gaan gebruiken op zich, aangezien die aan hetzelfde probleem lijden. 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.
Over het punt of tabellen bedoelt zijn voor layout of niet relevant is (ik wil hier toch even op in gaan, mede omdat zo weinig zich hier aan gewaagd hebben) is ook betwistbaar. Ik ken een aantal bedrijven die (succesvol) webrichtlijnen als uitgangspunt hebben en daarmee ook hun klanten lekker maken. In zo'n situatie maakt het wel degelijk uit of je de tabel voor data of voor layout gebruikt, want doe je dit verkeert dan voldoet je site niet aan de richtlijnen en geef je de klant niet wat je hebt beloofd.
Ander punt is dat wanneer je de tags gebruikt waar ze voor bedoelt zijn (p voor paragrafen, h# voor titels) alternatieve browsers zoals Lynx, of 'nieuwe' browsers zoals Safari 3 met webclips deze semantiek kunnen uitbuiten voor nieuwe functies. Safari 3 zal bijvoorbeeld een div automatisch als 'container' voor een webclip gaan zien, terwijl een tabel niet automatisch gepakt wordt. Het loont dus om met de mainstream opvatting mee te gaan om zo voordeel te halen uit de functies die anderen bieden voor deze mainstream regels.
Nu we het over Lynx hebben gehad, Lynx is een handige simulator van een zoekmachine-spider of een screenreader, omdat het geen CSS of Javascript ondersteunt. Je krijgt dus de layout te zien zoals hij zonder opmaak zou verschijnen. Hier zie ik weer een pluspuntje voor de divs tegenover de tabellen. Navigatie wil je immers altijd bovenaan hebben, omdat dit de links zijn die mensen het meest gebruiken, de items waar het meeste behoefte aan is. In mijn HTML zal ik dus altijd eerste de site-titel neerzetten, en dan de navigatie. Dan komt er de inhoud, en dan uiteindelijk onderaan de minder belangrijke content zoals bijvoorbeeld een lijst met relevante artikelen, of een lijst met nieuwe topics. Met tabellen is de plaats waar de inhoud wordt weergegeven afhankelijk van de plek waar je de inhoud in de HTML neerzet. Met divs en CSS ben je hierin veel vrijer en zou je de navigatie zonder problemen rechts kunnen plaatsen en de inhoud links, terwijl je met tabellen dan de td voor de inhoud boven de td voor het menu moet plaatsen.
Waarom is de plek van de inhoud binnen je HTML van belang? Terug naar Lynx. Lynx geeft de HTML weer zoals die is, zonder opmaak. Tabellen worden onder elkaar gezet. Je merkt al, voordat ik bij mijn navigatie kom moet ik nu eerst de hele inhoud voorbij scrollen. Zoekmachines werken hetzelfde, en lezen ook een pagina van boven naar beneden. Omdat veel mensen zo hun pagina's opbouwen, is Google bijvoorbeeld geöptimaliseerd voor menu's bovenaan, en hij zal deze ook apart weergeven, of van hoger belang (= betere pagerank) vinden.
Om nog even verder te gaan met de screenreaders, en de oplossing die je aandraagt: Persoonlijk ben ik iemand van de 'progressive enhancement', wat kortaf betekent dat je een basispagina serveert en deze met Javascript en CSS van extra's voorziet. Zo krijgt iedere bezoeker een oplossing die bij hem past. Wat jij doet is eigenlijk precies anders om. Jij schotelt ze meteen het beste voor - een pagina compleet met flitsende layout - en biedt ze een alternatief voor wanneer ze er niets mee kunnen. Een beetje vergelijkbaar met de situaties van vroeger. "Gebruik je geen Internet Explorer, klik dan hier voor een lelijke variant". Je onderkent niet alleen de kracht van de andere browser (Lynx bijvoorbeeld, wat HTML zelfstandig buitengewoon prettig kan weergeven) maar beledigt ook de bezoeker. "Jij bent minderwaardig, jij moet hier heen". Zo zeg je het niet, maar zo komt het wel over. En dat terwijl het technisch niet nodig is.
Verder wil ik iedereen toch oproepen om niet met argumenten te komen als "zoek een hobby" of "ben je wel lekker". Hiermee ondermijn je eigenlijk zijn redeneervermogen en maak je hem dus in weze belachelijk. Dat komt niet alleen over als arrogant, maar naar mijn idee (althans, wanneer dat soort argumenten tegen mij gebruikt worden) ben je dan blijkbaar te zwak om zelf de persoon te overtuigen van jouw ideeën. En dan is de vraag, ligt dat aan jouw overtuigingskracht, of heb je jezelf in een discussie gemengd waar je eigenlijk te weinig vanaf weet, en dus blijkbaar de verkeerde houding inneemt (namelijk dat jij het allemaal wel weet) en daarmee dus zelf de fout in gaat. Zou je in een debat met het argument "ben je ziek of zo" komen, dan heb je eigenlijk al in 1 klap verloren.
Diezelfde man vond het slotje uit, 1 uur later.
Zie hier de reden van die man.
Het is gewoon;
Tables = oud
Divs = nieuw
punt uit.
slotje!
Jelmer schreef op 21.02.2008 00:45:
Ik had het niet beter kunnen zeggen. :)...
Nou ja, misschien iets... ;)
Joep schreef op 21.02.2008 08:40:
Ooit was er een man, die bouwde een forum.
Diezelfde man vond het slotje uit, 1 uur later.
Zie hier de reden van die man.
Diezelfde man vond het slotje uit, 1 uur later.
Zie hier de reden van die man.
Daarbij vraag ik me dan weer af waarom deze site een cookie aanmaakt met je gebruikslevel EN een cookie met je gehashte wachtwoord... Maar goed beetje offtopic...
Jan Koehoorn schreef op 17.02.2008 23:54:
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.
Lode schreef op 17.02.2008 23:32:
@jan
Zou nog wel kunnen... of ik het wil proberen is een 2e...
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.
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...
@ de nieuwe leden: a.u.b. niet vragen om slotjes in een topic.
Edit:
@ jacco: oude leden zouden beter moeten weten ;-)
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Frank62 schreef op 20.02.2008 15:25:
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!Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>
<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>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>
<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!!
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.
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.
Als ik eerlijk ben wordt ik echt een beetje bang van uw manisch gedrag over tabellen.
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
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?