login  Naam:   Wachtwoord: 
Registreer je!
 Forum

[DISCUSSIE] Gebruik van tabellen

Offline junior - 23/06/2011 22:48
Avatar van juniorLid Ik wil even een discussie openen om wat ideeen uit te wisselen.
Ik ben een 'hobby-website-bouwer' en maak af en toe eens een kleine website, gewoon voor mezelf.

In het begin deed ik dit met tabellen, maar dat werd al snel een warboel van allerhande table's, tr's en td's door elkaar.
Om nog maar te zwijgen van die attributen die daar bijhoren.
Toen leerde ik css kennen, en een heel nieuwe wereld ging open.
Door simpelweg wat eigenschappen in een documentje te wijzigen, kon je site er al helemaal anders uit zien.
Prachtig! Geniaal! Ook het principe van 'opmaak en inhoud van elkaar scheiden', daar kon ik mij wel in vinden.

Intussen is mijn frustratie tegenover css alleen maar gegroeid.
Of moet ik eerder zeggen tegen div's.
Faux columns, aargh, bij tabellen ging dat toch vanzelf?!!
Een div met een gradient langs alle zijden maken? Met tabellen moest je toch gewoon een 9x9 tabel maken?
Floaten combineren met niet-floating stukken, een hel!

Oke, ik overdrijf misschien een beetje, maar feit blijft dat mijn F5 knop zowat kapot moet zijn, om steeds te moeten ontdekken dat de opmaak steeds nog net niet doet wat ik ervan verwacht.
Misschien komt deze frustratie voort uit mijn te lage kennis, maar feit blijft dat het allemaal niet zo intuïtief is als het gebruik van tabellen.

Toch wil ik mijn punt nog wat verder verduidelijken.
Naar mijn inzien bestaat een website uit 3 delen:
- Structuur
- Content
- Opmaak

Die structuur is heus niet altijd de gekende header-content-footer.
Je wil daar een submenu, sidebar, reclame, ... bij.

Om al deze zaken niet opnieuw tegen te komen, heb ik besloten om opnieuw tabellen te gebruiken.
Faux columns? EITJE! een gradient omheen de content? 5 min werk max!
Echt, een website maken werd weer intuïtie.

Daarbij houdt ik enkele regels aan om het overzichtelijk te houden:
- Alle attributen in een css-bestand
- Nooit colspan en wat dan ook gebruiken, maar liever een extra tabel
- Een nieuwe geneste tabel starten op logische punten (header, menu, contentcontainer, footer)
- Steeds in commentaar erbij de nieuwe tabel beschrijven en tabben

Als ik deze regels aanhoudt, merk ik dat dit toch overzichtelijk blijft.
Overigens, als je een mooie layout wil met div's, heb je er ook al snel heel nodig.
Bij div's heb je het probleem dat floaten, absoluut en relatief positioneren elkaar blijven beinvloeden.
Bij tabellen heb je dit niet, doordat je kan afbreken en een nieuwe geneste tabel starten.
In elke cel kan je dan ook nog steeds een bepaalde div absoluut positioneren of laten floaten moest dit nodig blijken.

Ook nog even dit voor mensen die rillingen van tabellen krijgen:
Moest de tag nu 'grid' ipv 'table' noemen, hoe zou de mening hierover zijn?



Hopend op een leuke discussie 
Junior

9 antwoorden

Gesponsorde links
Offline Bv202 - 23/06/2011 23:00 (laatste wijziging 23/06/2011 23:01)
Avatar van Bv202 Lid Bij het gebruik van tabellen gaat het er niet per se om dat de code wat onoverzichtelijker wordt. Waar het wel om gaat is dat deze incorrecte technieken voor een hoop andere problemen zorgen, zoals minder toegankelijkheid, slechtere indexering, etc.
Commentaar in je code zetten verandert daar niets aan.

Lees: http://www.stylesheets.nl
Offline junior - 23/06/2011 23:16
Avatar van junior Lid Bedankt voor de reactie en de link die ik zeker ga doornemen.

Maar zolang je het contentgedeelte semantisch opbouwt, met H-tags, alt attribuut bij afbeeldingen, ... zijn zoekrobotten en readers voor blinden/slechtzienden toch ook in staat dit te verwerken? Of zie ik dit verkeerd?
Want als je div's gebruikt, staan daar toch ook heel wat nietszeggende div's om je layout te verfraaien?



Junior
Offline WouterJ - 24/06/2011 10:05 (laatste wijziging 24/06/2011 10:06)
Avatar van WouterJ HTML gevorderde Zodra je tabellen gebruikt heb je al snel zo'n code:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. <tr>
  3.   <td>
  5.       <tr>
  6.         <td>Header logo</td>
  7.         <td>Bedrijfsnaam</td>
  8.       </tr>
  9.     </table>
  10.   </td>
  11. </tr>
  12. <tr>
  14.     <tr>
  15.       <td>Content</td>
  16.     </tr>
  17.   </table>
  18. </tr>
  19. <!-- Enz. -->

Je ziet nu al dat je 117 HTML tekens nodig hebt om alleen de header en content te tonen. Bij divs:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div>
  2.   <div>Logo</div>
  3.   Bedrijf naam
  4. </div>
  5. <div>
  6.   Content
  7. </div>

Heb je nog maar 33 HTML tekens nodig voor de header en content.

Tabellen verpesten je html/text ratio dus heel erg en dat is zeker belangrijk voor zoekmachines.
Offline keverineke - 24/06/2011 13:40 (laatste wijziging 24/06/2011 13:41)
Avatar van keverineke Lid Met div's heb je dan wel meer CSS maar liever dat dan een ellenlange code...

Wat je ook hebt met tabellen is dat IE en MF deze soms anders weergeven en dat is altijd KL*TE
om ze juist te plaatsen.
Offline ArieMedia - 24/06/2011 14:26
Avatar van ArieMedia Gouden medaille

PHP ver gevorderde		 Tabellen = opsommingen/data weergave
Div = opmaak

Tabellen hebben een heel ander doel dan div's.

Lappen HTML gaat trouwens wel meevallen als templates gaat gebruiken.. Meestal verdeel je de HTML dan over verschillende templates waardoor het ook nog eens overzichtelijker werkt.
Offline keverineke - 24/06/2011 14:40
Avatar van keverineke Lid Wat ook makkelijk is is een pagina maken /frames/header.xxx en /frames/footer.xxx en deze op elke pagina includen, als je dan iets moet veranderen in de header, footer dan moet je dat niet op elke pagina doen. En je code is uiteraard ook veel overzichtelijker en korter.
Offline Quibus - 24/06/2011 19:43
Avatar van Quibus Nieuw lid Je kunt ook gebruik maken van een tabel-achtige structuur, zonder tabellen te gebruiken.
Maak in je css de volgende 3 classes:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .tabel {display:table;}
  2. .row {display:table-row;}
  3. .cell {display:table-cell;}


Vervolgens zet je in je html-code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="tabel">hier je tabel</div>
  2. <div class="row">Hier de table-row</div>
  3. <div class="cell">en hier de inhoud van je table-cell</div>


Het voordeel van deze methode is dat je de 'table'-elementen, met behulp van je CSS overal kunt plaatsen, je kunt een mooie table-achtige structuur aanhouden, en het is geen echte table in de zin van een rijtje data-cellen.

Op deze manier kan je table -elementen gebruiken, zonder het gebruik van <table>s.

Quibus
Offline cx1213 - 25/06/2011 14:40
Avatar van cx1213 Lid zoizo geen tabellen voor de opmaak gebruik dan gewoon display:table.
Offline Pieter - 26/06/2011 11:38
Avatar van Pieter Gouden medaille

SEO guru		 Het duurt inderdaad iets langer tegen dat je met CSS een ontwerp volledig nagebouwd hebt, maar...
1. Er is minder code nodig
2. Het is toekomst proof
Probeer maar eens gemakkelijk achteraf met die blokken te klooien, in css is dat een aantal waarden aanpassen. Een goed voorbeeld wat een andere stylesheet doet met dezelfde htmlcode: csszengarden.com
3. Code is netter

Bovendien hoort een tabel bij de inhoud, semantisch gezien. Als je met tabellen werkt, kan je evengoed terug met frames beginnen werken... 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.36s