Productlijst layout, div, dl, table?

[Speedener]

Ik ben de laatste tijd bezig om de semantiek in mijn (x)html-werk te verbeteren. Veel gelezen op got en columns/logs/tuts.

Voor de layout voor een webwinkel ben ik nu aangekomen bij de productlijstlayout. De lijst met de producten van een bepaalde categorie onder elkaar.

schematisch gezien wil ik het volgende bereiken:

code:

naam van product
                  beschrijving van het product
[afbeelding]                         
                  prijs van product

Nu kan ik dit bereiken door een tabel (maar is een table daarvoor bedoeld?)
Of een div set. (maar schiet ik dan niet door in het niet-willen-gebruiken van een table?)
Of een dl/dt/dd set. Het is een lijst, met titel en extra informatie over die titel.

Welke oplossing kan ik semantisch gezien het beste gebruiken, en waarom (niet).

[BtM909]

Waar is een tabel, volgens jou en / of de specs , wel voor bedoeld?

[Speedener]

BtM909 schreef op dinsdag 01 augustus 2006 @ 21:06:
Waar is een tabel, volgens jou en / of de specs , wel voor bedoeld?

Een tabel is bedoeld voor het weergeven en combineren van gegevens.

Bijvoorbeeld:

code:

       kleur   smaak
aug    rood    zuur
sept   paars   bitter
okt    geel    zout
nov    groen   zuur
dec    zwart   zoet

[Zoefff]

Prijs, beschrijving en afbeelding zijn toch ook gewoon gegevens? Dit is prima te beschouwen als tabulaire data hoor

[Victor]

Ik gebruik zelf per product een DIV, met daarin de productnaam in een Hx, de afbeelding en vervolgens een DL voor de eigenschappen van het product. Hiertoe reken ik de voorraadstatus, prijs, beschrijving, levertijd, etc. Een tabel was ook mogelijk geweest, ware het niet dat een DL in dit geval eenvoudig op te maken was door middel van CSS, en mijns inziens hier semantisch volkomen bruikbaar is.

[Nakebod]

An sich kan je het wel prima met css oplossen denk ik, en eventueel met de display property, hoewel dit niet eens per se zou hoeven.
Want display kent o.a.:
table The element will be displayed as a block table (like <table>), with a line break before and after the table.
http://www.w3schools.com/css/pr_class_display.asp

[Victor]

Nakebod schreef op dinsdag 01 augustus 2006 @ 23:02:
An sich kan je het wel prima met css oplossen denk ik, en eventueel met de display property, hoewel dit niet eens per se zou hoeven.
Want display kent o.a.:
table The element will be displayed as a block table (like <table>), with a line break before and after the table.
http://www.w3schools.com/css/pr_class_display.asp

Natuurlijk valt het met CSS op te maken, maar dan rest de vraag, welke elementen ga je gebruiken?

[gvdh81]

Er is geen enkele reden om geen tabel te gebruiken, je "kan" het natuurlijk met css doen, maar dan kom je voor de volgende dilemma's:
- welke elementen
- hoe zit het eruit als je gaat printen
- hoe ziet het er op andere browsers uit
- padding/margin/boxmodel en ga zo maar door.

[Victor]

Wat wordt hier toch bedoeld met "het met CSS doen"? Je geeft je data structuur met (X)HTML, je zorgt dat het er een beetje lekker uitziet met CSS en eventueel laat je het je scherm uitvliegen met JavaScript, maar je kunt geen pagina's bouwen met alleen CSS.

Dus ja, de TS kan een table gebruiken, maar deze vervolgens ook gewoon opmaken met CSS. Of een DL, of welke element hij dan ook besluit te gebruiken.

[gvdh81]

nau kijk als hij enkel met divjes gaat werken en die langs elkaar gaat positioneren met css (float), dan is het een hoop werk. Dus ik zie geen andere manier om het structureel te presenteren zelfs als de browser van de bezoeker geen css ondersteund. Een tabel blijft staan in een tabel.

[Speedener]

Mja dat ik 'iets' met CSS ga doen/doe, dat lijkt me duidelijk.

De oplossing van KL klinkt goed. Maar zou je ipv de header die je gebruikt voor de artikel naam niet beter in een <dt> kunnen zetten? Het is tenslotte een titel.

[:murb:]

Als je kijkt naar hoe de topic starter het wil presenteren, dus titel boven plaatje, details rechts van plaatje, dan is het gebruik van een tabel semantisch gezien niet de beste oplossing, tenzij je CSS gaat gebruiken om de table geheel uit elkaar te rukken met idd de display property: dan is een table oplossing helemaal zo slecht nog niet, misschien wel de beste... kun je ook een mooie print lay-out maken (die mogelijk wel weer meer een table lay-out aanneemt). Ik ben alleen bang dat het je nog de enige kopzorgen zou kunnen geven met het onder alle browsers goed te positioneren. Tja... verder is een <hn> met wat p'tjes of een definition list ook wel ok (header/title, wat is het verschil?)... ik zou vooral toch ook de uiteindelijke presentatie deels in het achterhoofd houden... een foute manier van denken mogelijk... maar a) er is niet een beste oplossing, b) gigantische lappen css gebruiken om iets compleet anders te stylen is ook niet alles.

[Victor]

Speedener schreef op dinsdag 01 augustus 2006 @ 23:48:
Mja dat ik 'iets' met CSS ga doen/doe, dat lijkt me duidelijk.

De oplossing van KL klinkt goed. Maar zou je ipv de header die je gebruikt voor de artikel naam niet beter in een <dt> kunnen zetten? Het is tenslotte een titel.

En dan zo'n constructie krijgen:

HTML:

<dl>
    <dt>Appelsap</dt>
    <dd>
        <dl>
            <dt>Prijs</dt>
            <dd>1,50</dd>
            <dt>Voorraadstatus</dt>
            <dd>Op voorraad</dd>
            <dt>Omschrijving</dt>
            <dd>Sap, van appels</dd>
        </dl>
    </dd>
</dl>

Ik vond dit netter:

HTML:

<h3>Appelsap</h3>
<dl>
    <dt>Prijs</dt>
    <dd>1,50</dd>
    <dt>Voorraadstatus</dt>
    <dd>Op voorraad</dd>
    <dt>Omschrijving</dt>
    <dd>Sap, van appels</dd>
</dl>

[Speedener]

Ja, true. Ziet er goed uit

Hoe krijg ik overigens met css die dt en dd naast elkaar?

[Victor]

Speedener schreef op woensdag 02 augustus 2006 @ 00:06:
Ja, true. Ziet er goed uit

Hoe krijg ik overigens met css die dt en dd naast elkaar?

Cascading Stylesheet:

dt {
    float: left;
}

dd {
    margin-left: 100px;
}