Div Vs. Table; de eeuwige discussie

Ik probeer voor de opmaak van mijn websites altijd voornamelijk divs tegebruiken. En tabellen alleen voor tabular data, waarvoor het bedoeld is. Echter zijn er van die dingen waarbij ik bij de opmaakt echt niet zonder tabellen kan, althans dat denk ik. Hieronder een voorbeeldje. Voor de opmaak moeten in alle hoeken van een afbeelding een divje geplaatst worden. De afbeelding is variabel van grootte. Als ik hiervoor een div gebruik, past hij zij afmetingen niet aan aan de inhoud, iets wat een tabel wel doet. Een div krijgt een breedte van 100%, ten opzichte van zijn parent element, wanneer er inhoud in geplaatst wordt. En dus niet 100% van zijn inhoud. Heeft iemand hiervoor een workaround bedacht, of moet ik dit gewoon met tabellen blijven doen?

[code:1:a2cd003dbb]<table style="position:relative; top:100px; left:100px; border:solid 1px green; margin:0px; padding:0px; border-collapse:collapse;">
<tr>
<td>
<img style="position:relative; top:0px; left:0px; border:none; margin:0px; padding:0px;" src="http://members.home.nl/skilip/voorbeeld.png" />
<div style="position:absolute; top:0px; left:0px; width:20px; height:20px; background-color:red; border:none;"></div>
<div style="position:absolute; top:0px; right:0px; width:20px; height:20px; background-color:red; border:none;"></div>
<div style="position:absolute; bottom:0px; left:0px; width:20px; height:20px; background-color:red; border:none;"></div>
<div style="position:absolute; bottom:0px; right:0px; width:20px; height:20px; background-color:red; border:none;"></div>
</td>
</tr>
</table>[/code:1:a2cd003dbb]

Bedoel je [url=http://www.positioniseverything.net/articles/onetruelayout/example/rounded_future_perfect]zoiets[/url]?

Nee, deze hebben allen vaste maten. Het gaat erom dat de hoogte en breedte zich aanpast aan de inhoud. Ik zie trouwens net dat mijn code in Firefox ook niet goed is.

[quote:ae133f3a9e="Skilip"]Nee, deze hebben allen vaste maten. Het gaat erom dat de hoogte en breedte zich aanpast aan de inhoud. Ik zie trouwens net dat mijn code in Firefox ook niet goed is.[/quote:ae133f3a9e]

De width werd hier enkel gedefiniëerd omdat anders de inhoud de div te ver zou laten scalen in de breedte.

De titel van je post zet mensen op het verkeerde been: dit heeft werkelijk helemaal niets met de discusie tables versus divs te maken.

Je titel moet zijn: hoe maak ik hoeken op een flexibele div?

Er zijn verschillende oplossingen voor. Het beste voorbeeld qua techniek is een voorbeeld waar ze dropshadows achter een div zetten, maar in feite is het principe hetzelfde:

http://www.alistapart.com/articles/onionskin/

Ik heb een flexibele oplossing gemaakt en toegepast hier door gebruik te maken van extra <span> tags, omdat ik daarmee de boel het snelst aan de praat kreeg. Is niet nodig, je hebt met wat slim werken maar 1 extra <span> nodig, maar om de zaak simpel te houden hier maar het voorbeeld:

http://www.clupconsultants.nl/woorden.html

Als je op bovenstaande pagina met appeltje en + de tekst vergroot in Firefox, zie je dat de borders meebewegen. De kolom heeft een vaste breedte, maar is niet nodig in bovenstaand voorbeeld om toch te werken. Als je de CSS en de HTML bekijkt zie je vanzelf hoe het werkt, inclusief IE-hacks.

Werkt super idd! Eigen site? De titel is niet totaal, mega ultra super misleidend en dus ontzettend slecht toch? ;)

[quote:86b7311fa3="Skilip"]Werkt super idd! Eigen site?[/quote:86b7311fa3] Ja.

[quote:86b7311fa3=“Skilip”]De titel is niet totaal, mega ultra super misleidend en dus ontzettend slecht toch? ;)[/quote:86b7311fa3]
Wat bedoel je?

Tenappel heeft gelijk. Ik verwachtte ook een discussie over div's vs. tabellen. Het is wellicht handiger om even de titel aan te passen.

Of anders doe jij het ff :wink:

hahaha.. nee dat is niet nodig.

Of we gaan verder met een heftige discussie. :P

Wat ik bedoelde is dat dit zo'n situatie is waarin je de keuze moet maken een div te gebruiken omdat dat stikt codegebruik is, of dat je een tabel gebruikt omdat dat gewoon makkelijker is. Sorry voor de onduidelijkheid!

[quote:8fb314a1b8="Skilip"]Wat ik bedoelde is dat dit zo'n situatie is waarin je de keuze moet maken een div te gebruiken omdat dat strikt codegebruik is, of dat je een tabel gebruikt omdat dat gewoon makkelijker is. Sorry voor de onduidelijkheid![/quote:8fb314a1b8]

zucht … daar gaan we weer. [b:8fb314a1b8]een tabel gebruiken is niet makkelijker dan een div gebruiken[/b:8fb314a1b8]. Het is echt pure nonsense. Jij [i:8fb314a1b8]vindt[/i:8fb314a1b8] het gebruik maken van een tabel gemakkelijker, omdat je jezelf dat [i:8fb314a1b8]al een keer geleerd[/i:8fb314a1b8] hebt. Je moet dus jezelf opnieuw trainen.

Als je helemaal niets van webontwikkeling zou afweten en je moet nu leren hoe je een afgeronde hoek met div’s of met een tabel moet plaatsen, dan is dat even moeilijk of makkelijk.

Pasgeleden vroeg iemand me of ik even kon helpen met een tabel-georienteerde layout. Ik heb 10 minuten gefrustreerd zitten prutsen, ik ben het volkomen verleerd.

Het is geen pure nonsense Tennapel! Ik ben echt niet de enige die hiermee stoeit. Vandaar de eeuwige discussie.

Het punt is niet of je er mee stoeit, maar of het een makkelijker is dan het ander. Als je het ene truukje kent en 'in tabellen' denkt is het denken in <div> misschien wel lastig, maar andersom dus ook. Wie handig is in een 3-koloms opmaak in divjes te bouwen heeft er fikse moeite mee om hetzelfde in tabellen te doen. Zeker als je in de code werkt. Eenzelfde soort verhaal kun je houden over het bouwn van sites in frames. Een manier van werken die goddank bijna iedereen is afgeleerd, hoewel ik laatst nog ergens een voorbeeld zag van een site waarin elk menu-iten een frame was...

Werken volgens webstandards is uiteindelijk veel eenvoudiger. Minder code, minder vervuiling van de vormgeving. En dat je het aan moet leren en misschien iets meer vanuit een concept moet opereren dan vanuit het resultaat op het scherm is alleen maar een [i:238a973063]andere[/i:238a973063] manier van werken, geen moeilijker.

[quote:2e09c2a940="Skilip"]Het is geen pure nonsense Tennapel! Ik ben echt niet de enige die hiermee stoeit. Vandaar de eeuwige discussie.[/quote:2e09c2a940]

En daarmee is de discussie nonsense. Het spijt me, het heeft met jouw individuele vaardigheden van dit moment te maken en bijzonder weinig met de achterliggende gedachte van (X)HTML+CSS.

Er zijn heel veel ontwikkelaars die ‘old school’ opgeleid zijn en nu worstelen met de overgang. Bijna iedere webontwikkelaar (profesional of amateur) die nu werkt met CSS heeft zich door die zure appel heen moeten bijten, ik ook. Prima als webontwikkelaars op dit moment proberen de nieuwe vaardigheden eigen te maken en vragen stellen, alleen maar goed. Maar beroep je daarmee a.u.b. niet op een semantische discussie die gewoed heeft en al lang geen discussie meer is, behalve voor een paar conservatieve zeloten (Dave Winer bijvoorbeeld).

Ok, ik begrijp het. Ik loop denk ik nog wat achter wat dat betreft. Ik werk nu ongeveer twee een jaar met div-jes. Daarvoor deed ik veel met tabellen, totdat iemand me vertelde dat ik het beter zonder kon gaan doen. Ik heb inderdaad nog veel moeite de zelfde functionaliteit te halen uit div-jes. Ik doe dit ook (nog) voor de lol, en zit er niet zo diep in als jullie. In elk geval bedankt voor de uitleg allemaal.