[Semantiek/HTML/CSS] ul/dl/table keuze

Naam	Pascal
Ras	Mens
Beroep	Webdeveloper

Als ik de bovenstaande opsomming neer zou willen zetten, zou ik in dit geval als eerste een table kiezen omdat ik geen idee heb hoe ik visueel deze opsomming correct neer kan zetten dmv een ul of dl.

Ik heb er nu 3 uur opzitten met CSS stijling en een Definition List.


code:

<style type="text/css" title="default_style" media="screen">
#personal_information
{
clear: both;
float: left;
width: 100%;
}

#personal_information dl
{
float: left;
margin: 0;
padding: 0;
width: 200px;
}

#personal_information dt
{
float:left;
font-weight: bold;
text-align: left;
width:100px;
}

#personal_information dd
{
float:left;
text-align: left;
width:100px;
}
</style>
<div id="personal_information">
<dl>
<dt>Naam</dt><dd>Pascal</dd>
<dt>Ras</dt><dd>Mens</dd>
<dt>Beroep</dt><dd>Webdeveloper</dd>
</dl>
</div>

Deze HTML & CSS levert een representatie op die ongeveer gelijk is aan de representatie die ik graag zou willen, maar is helaas niet dynamisch te vullen. De breedte is namelijk vast opgegeven en zorgt ervoor dat de <dt> && <dd> elementen met elkaar op 1 regel staan. Natuurlijk, zou ik nog in de bovenstaande opsomming willen dat de <dt> elementen netjes onder elkaar links uitlijnen en de <dd> elementen moeten ook netjes onder elkaar uitlijnen. Voor alsnog begin ik te denken dat ik dit alleen maar goed via een table kan oplossen en ik weet niet precies of een table de juiste oplossing is tav de semantische waarde.(Semantiek is niet mijn sterkste kant)

0528973 wijzigde dit bericht 19-09-2005 17:00 (72%)

Een DL zou inderdaad prima zijn, maar lastig te realiseren met de eisen die je stelt. In het uiterste geval zou je zoiets kunnen doen:
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div class="table-definitions">     <dl>         <dt>Lorem</dt>         <dd>Ipsum dolor sit</dd>     </dl>     <dl>         <dt>Lorem</dt>         <dd>Ipsum dolor sit</dd>     </dl>     <dl>         <dt>Lorem</dt>         <dd>Ipsum dolor sit</dd>     </dl> </div>

Cascading Stylesheet:

1 2 3 4 5 6 7 8 9 10 11

.table-definitions {     display:table; } .table-definitions dl {     display:table-row; } .table-definitions dd {     display:table-cell; }

Uiteraard niet IE-compatible...

Gezien de eisen die je stelt zou ik me pragmatisch opstellen en lekker voor de table kiezen.

Nu heb ik er niet super veel verstand van, maar ik vind het toch wel tabel waardig eigenlijk

een dl is idd semantisch beter, dit is zeker geen tabulaire data (er is geen verband in de verticale richting), maar zoals blues al zegt: gezien de eisen: kies lekker voor een tabel.

quote:

mophor schreef op maandag 19 september 2005 @ 17:06:
een dl is idd semantisch beter, dit is zeker geen tabulaire data (er is geen verband in de verticale richting), maar zoals blues al zegt: gezien de eisen: kies lekker voor een tabel.

Hoe bedoel je precies verband in de verticale richting? Kan je dat verder uitleggen? Ik twijfel (ik denk net als de TS) vaak of het nu wel tabel waardig is namelijk

quote:

We Are Borg schreef op maandag 19 september 2005 @ 17:10:
[...]

Hoe bedoel je precies verband in de verticale richting? Kan je dat verder uitleggen? Ik twijfel (ik denk net als de TS) vaak of het nu wel tabel waardig is namelijk

Ik denk dat hij bedoeld dat je dan meerdere rijen hebt met iedere keer dezelfde data, alleen andere waardes.

In dit geval is iedere rij andere data

quote:

mophor schreef op maandag 19 september 2005 @ 17:06:
een dl is idd semantisch beter, dit is zeker geen tabulaire data (er is geen verband in de verticale richting), maar zoals blues al zegt: gezien de eisen: kies lekker voor een tabel.

Maar, dat kan je wel weer voor elkaar krijgen dmv th's en td headers.

nee, ik bedoel dus idd precies wat momania zegt, iedere rij is andere data, daar veranderen headers niks aan

quote:

mophor schreef op dinsdag 20 september 2005 @ 10:44:
nee, ik bedoel dus idd precies wat momania zegt, iedere rij is andere data, daar veranderen headers niks aan

Moet een tabel uberhaupt verticale cohesie hebben (kan nl. ook horizontaal zijn) ?

Ben het nl. ook wel eens met chem

quote:

mophor schreef op dinsdag 20 september 2005 @ 10:44:
nee, ik bedoel dus idd precies wat momania zegt, iedere rij is andere data, daar veranderen headers niks aan

maar headers gebruiken in de tbody is ook niets mis mee hoor.. doe ik ook zo vaak


HTML:

1 2 3 4 5 6 7 8 9

<table>   <thead>     <tr><th>header</th><th>header1</th></tr>   </thead>   <tbody>     <tr><th>bodyheader</th><td>bodydata</td></tr>     <tr><th>bodyheader2</th><td>bodydata2</td></tr>   </tbody> </table>

Ik vind het ook wel ver gaan om dit niet als table te beschrijven. Is onderstaande dan ook geen tabulaire data?
code:

Naam     Pascal         Spock
Ras      Mens           Vulcan
Beroep   Webdeveloper   Trekkie

M.a.w. omdat de tabel maar 1 rij/kolom heeft, is het ineens geen tabulaire data meer? Dat wordt leuk als je een tabel gaat filteren in je applicatie; moet je dan ineens je html structuur omgooien als je maar 1 resultaat hebt

Ik vind het de moeite niet waard om hier lang over na te denken. Leuk als je verder toch niets te doen hebt, maar niet als je aan het eind van de dag iets werkends in je versiebeheersysteem moet inchecken.

Inderdaad voor dit probleem hoef ik aan het einde van de dag niets in te checken Het probleem achter mijn vraag is meer, hoe kan ik beslissen wanneer iets bijvoorbeeld tabulaire data is en wanneer niet.

Wanneer deze vraag geen duidelijk antwoord bevat is het mogelijk om opsommingen bijvoorbeeld ook als tabulaire data te zien. Volgens mij is iedereen die een beetje met semantiek en dergelijke bezig probeert te zijn het erover eens dat een opsomming een tabulaire data is en dus geen tabel behoeft om de semantische waarde door te geven. Mijn probleem bevind zich in het gebied, gegevens bevatten een semantische waarde maar hoe bepaal je die semantische waarde. Een boel gegevens stralen duidelijk uit welke waarde ze hebben, denk bijvoorbeeld aan hyperlinks, adressen, citeringen en dergelijke en zoals gewoonlijk is hier dus ook een grijsgebied waarin je zelf moet kiezen welke waarde je iets meegeeft.

Zo zou idd een tabel in dit geval, met een tbody waarin th & td cellen gemixed worden icm een thead & caption zeer waarschijnlijk de juiste of misschien moet ik zeggen gewenste semantische waarde overbrengen. Markup talen & semantiek zijn zoals duidelijk mogen zijn niet mijn sterkste kant en vandaar dat ik deze situatie naar voren bracht opdat er wat meer duidelijkheid zou kunnen onstaan in het grote grijze grensgebied van semantiek.

Mijn vraag was ook niet zozeer eigenlijk bedoeld als hoe moet ik dit gaan oplossen aangezien ik denk dat het onmogelijk is om dit dmv een UL of DL op te lossen. Ik had meer gehoopt op antwoorden die dmv hun argumentatie zouden onderbouwen waarom ik een TABLE/UL of DL zou moeten kiezen onafhankelijk van de eventuele visuele presentatie ervan. Mijn excuus voor het verkeerd stellen van de openingsvraag.

0528973 wijzigde dit bericht 20-09-2005 17:35 (14%)

Naam

Pascal

Ras

Mens

Beroep

Webdeveloper

code:

<style type="text/css">
dl.demonstratie dt {
  float:left;
  font-weight:bold;
}
dl.demonstratie dd {
  margin-left:6em;
  font-style:italic;
}
</style>
<dl class="demonstratie">
<dt>Naam</dt><dd>Pascal</dd>
<dt>Ras</dt><dd>Mens</dd>
<dt>Beroep</dt><dd>Webdeveloper</dd>
</dl>

[edit]

Oeps curry, volgende keer goed specifiek lezen of de topicstarter zichzelf gaat tegenspreken nadat ie "omdat ik geen idee heb hoe ik visueel deze opsomming correct neer kan zetten dmv een ul of dl" heeft gezegd... tis zo iig wel zuiverder dan de versie uit je TS

Blijft het feit natuurlijk staan dat je gewoon een table toont en je die dus gewoon kan gebruiken. Mensen willen het tegenwoordig zo graag 'correct' doen dat ze nog wel eens vergeten dat er ook nog genoeg mogelijkheden over zijn waarin je wel gewoon een table semantisch correct kunt gebruiken. Ik kreeg laatst zelfs commentaar op het feit dat ik een stuk zuiver tabulaire data van 3 bij 11 cellen als table toonde

curry684 wijzigde dit bericht 20-09-2005 17:50 (38%)

quote:

BtM909 schreef op dinsdag 20 september 2005 @ 10:47:
[...]

Moet een tabel uberhaupt verticale cohesie hebben (kan nl. ook horizontaal zijn) ?

Ben het nl. ook wel eens met chem

een eigenschap van een tabel is juist dat ie en verticale en horizontale samenhang heeft, natuurlijk zijn headers in de body geen enkel probleem, maar daar gaat het ook niet om. Headers in de thead geven iha aan waar de kolom over gaat, in het voorbeeld van de ts kan je de kolommen geen naam geven, omdat de waarden erin geen samenhang geven.

Op zich ben ik het ergens wel met Annie eens ook, zo had ik het nog niet bekeken. Maar zoals ik al zei: gebruik gewoon lekker een tabel, wel zo handig. Met het argument van Annie boeit het gewoon nog een stuk minder.

quote:

mophor schreef op dinsdag 20 september 2005 @ 18:14:
[...]


een eigenschap van een tabel is juist dat ie en verticale en horizontale samenhang heeft, natuurlijk zijn headers in de body geen enkel probleem, maar daar gaat het ook niet om. Headers in de thead geven iha aan waar de kolom over gaat, in het voorbeeld van de ts kan je de kolommen geen naam geven, omdat de waarden erin geen samenhang geven.

Mijn opmerking slaat op dit stuk, my friend:

quote:

mophor schreef op maandag 19 september 2005 @ 17:06:
een dl is idd semantisch beter, dit is zeker geen tabulaire data (er is geen verband in de verticale richting), maar zoals blues al zegt: gezien de eisen: kies lekker voor een tabel.

Een tabel kan dus ook een verband hebben in horizontale richting

quote:

Op zich ben ik het ergens wel met Annie eens ook, zo had ik het nog niet bekeken. Maar zoals ik al zei: gebruik gewoon lekker een tabel, wel zo handig. Met het argument van Annie boeit het gewoon nog een stuk minder.

Exactly my thoughts

Ook eens met Annie; dat is o.a. ook de reden waarom ik hier op GoT bijvoorbeeld de preferences enzo ook gewoon in een table heb gegoten

Soz Curry, ik spreek mezelf inderdaad wel vaker tegen. Iets als wat jij daar neerzet heb ik idd ook geprobeerd maar ik gebruikte geen EM maar gewoon pixels. Ik ben nog steeds niet helemaal gewend aan de verschillende manieren om maten op te geven in CSS.

Bedankt mensen de opmerking van Annie heeft mij weer een stukje verder op weg geholpen al blijft semantiek en de poging tot het correct gebruiken ervan voor mij nog steeds een groot grijs gebied blijft. Wanneer is iets een opsomming en wanneer is iets een tabel.

Ik ga nog wel even verder studeren op dit onderwerp, nogmaals bedankt allemaal.

Inderdaad valt het met de oplossing van Curry zo neer te zetten, echter dat valt of staat icm het feit dat de headers altijd binnen de margin-left moeten vallen qua lengte....

0528973 wijzigde dit bericht 21-09-2005 14:41 (13%)