[CSS / XHTML] Opsommen wat is de juiste methode?

Iedereen heeft wel eens een webshop bezocht en een productoverzicht van een bepaalde categorie bekeken (naam, prijs enz.). Deze worden veelal via tables en td's uitgelijnd (GoT ook). Tables zijn in dit geval niet de juiste oplossing, maar hoe moet het dan?

Ik had de volgende hersenspinsels:
- Twee <ul> en <li>, een lijst in een lijst. Dus een lijst voor de horizontale en een voor de vertikale uitlijning, maar dit lijkt mij teveel code op te leveren.
- Een <ul> en <li> en deze dan onderverde in <p> met de gewenste breedte. Dus een <p> voor naam enz.
- Alleen maar <div> met de juiste breedte gebruiken, dus een voor de naam, prijs, titel enz.

Ik heb niet gecheckt of mijn "gedachten" xhtml 1.0 strict zijn. Ook heb ik nog geen website over css kunnen vinden die op dit onderwerp ingaat (of ik heb op foute onderwerpen gezocht).

Mijn vraag dus (weer eens) hoe zouden jullie dit doen en wat is de "juiste" methode?

edit:

Mocht ik niet reageren, dan kan het zijn dat ik lig te slapen

DerKleinePunkt wijzigde dit bericht 17-01-2005 23:05 (16%)

Van jouw opties vind ik optie 1 de beste. Je wilt gegevens opsommen, dus dat doe je met een lijst en niet door middel van paragrafen (p) of containers (div). Maar als ik goed begrijp wat je wilt kun je voor de lijst in de andere lijst het beste een definition list gebruiken. Voor die lijst met de naam en de prijs, etc. dus.

En als ik het niet goed begrijp moet je maar even een voorbeeldje laten zien

ludo wijzigde dit bericht 17-01-2005 23:09 (25%)

quote:

DerKleinePunkt schreef op maandag 17 januari 2005 @ 23:03:
Iedereen heeft wel eens een webshop bezocht en een productoverzicht van een bepaalde categorie bekeken (naam, prijs enz.). Deze worden veelal via tables en td's uitgelijnd (GoT ook). Tables zijn in dit geval niet de juiste oplossing, maar hoe moet het dan?

Als ik dit zo lees, vermoed ik dat je zoiets als op deze pagina bedoelt: http://www.tweakers.net/pricewatch/cat/65

Ik zou dit niet in een ander element gaan stoppen, aangezien het typisch data is die in een tabel thuis hoort

Wel goed dat je nadenkt over de structuur en hoe het beter kan, maar je moet oppassen dat je het aanpassen niet te ver, te moeilijk en incorrect doorvoert

Op zich is er met tabellen niets mis. Ze zijn bedoeld om data te presenteren. Als dat in dit geval een lijst met producten is, is er niks op tegen om daar gebruik van te maken.

Uit de verschillende manieren van oplossen kun je het beste één uitkiezen die je lekker vind werken. Zelf ben ik nog het meest tevreden over verschillende divjes naast elkaar door middel van float. Daar heb ik persoonlijk de beste resultaten mee gehaald.

Een list in een list is helemaal geen probleem. Zoveel extra code kost het ook niet. Het is vooral even uitzoeken hoe je dat het beste in je css kan doen.

Een tabel zoals in de pricewatch link van Rickets is gewoon een datatabel. Hiervoor zijn tabellen in html juist bedoeld.
Of begrijp ik nu verkeerd wat je wil doen?

Zoals ik het begrijp is het gebruik maken van een <table> toch de beste oplossing. Kan je wellicht wat specifieker zijn met betrekking tot welke pagina's je bedoelt?

quote:

Rickets schreef op maandag 17 januari 2005 @ 23:10:
[...]

Als ik dit zo lees, vermoed ik dat je zoiets als op deze pagina bedoelt: http://www.tweakers.net/pricewatch/cat/65

Ik zou dit niet in een ander element gaan stoppen, aangezien het typisch data is die in een tabel thuis hoort

Wel goed dat je nadenkt over de structuur en hoe het beter kan, maar je moet oppassen dat je het aanpassen niet te ver, te moeilijk en incorrect doorvoert

Dat laatste is nou juist het probleem, ik ga vaak te ver. De validator van de W3C houd het wel enigszins binnen de perken, maar ook niet altijd. Is er toevallig een site of een onderdeel van de W3C site waar expliciet wordt verteld van dit zou officieel zo moeten en deze elementen heeft deze subelementen enz.

Maar de pricewatch is een van de vele mooie voorbeelden, waarom mag dit dan wel met tables? Het is immers ook een lijst en dus ul en li? M.a.w. een table mag gebruikt worden wanneer een lijst uit meerdere onderdelen bestaat? Je maakt het me niet makkelijk hoor

edit:

Voor woudloper, zie site Rickets

DerKleinePunkt wijzigde dit bericht 17-01-2005 23:19 (3%)

een lijst gebruik eerder voor een opsomming van dingen
dus:

• ds
• ds
• dsf

maar een table is handig als je 2 dimensinale data hebt. Voor mij is het niet logisch om de data die uit de pricewatch komt in een lijst te zetten.

quote:

DerKleinePunkt schreef op maandag 17 januari 2005 @ 23:18:
Is er toevallig een site of een onderdeel van de W3C site waar expliciet wordt verteld van dit zou officieel zo moeten en deze elementen heeft deze subelementen enz.

Jawel, hier zijn de HTML4.01 specificaties!

quote:

Maar de pricewatch is een van de vele mooie voorbeelden, waarom mag dit dan wel met tables? Het is immers ook een lijst en dus ul en li? M.a.w. een table mag gebruikt worden wanneer een lijst uit meerdere onderdelen bestaat?

Botweg: een tabel is voor 2-dimensionale data, een lijst voor hierarchische data.

Een handige link over het "zoveel mogelijk" semantisch correct structueren van XHTML documenten:
http://www.brainstormsand...cles/semantics/structure/

Commentaar die ik heb gegeven op een artikel over het structueren van web pagina's:
http://www.stuffandnonsen..._a_name_pt2.html#comment2

Voor een lijst van producten is in XHTML een element van het type "table" het meest dichtsbijzijnde semantische equivalent. Een lijst van producten (table) bestaat uit meerdere entries (tr) en elke entry heeft gerelateerde informatie (td).

machuidel wijzigde dit bericht 17-01-2005 23:42 (70%)

quote:

zirus schreef op maandag 17 januari 2005 @ 23:24:
een lijst gebruik eerder voor een opsomming van dingen

Is de pricewatch niet een opsomming van productprijzen of begrijp ik het totaal verkeerd

P.S. je tweede stelling m.b.t 2 dimensionale data is voor mij logischer.

Even voor de goede orde, als ik het juist begrijp zijn tables dus toegestaan, gewenst in het geval van 2 dimensionale data? Maar dan moet de 2 dimensionale data wel van toepassing zijn op (bijv.) eenzelfde onderwerp. Dus pricewatch is productinformatie, een product kan bestaan uit een naam, prijs enz. enz.

[kleine toevoeging]

Blues, je was me net voor met je conclussie. DerKleinePunkt schaamt zich voor het feit dat hij die site zelf niet kon bedenken (het ook al laat )

DerKleinePunkt wijzigde dit bericht 17-01-2005 23:37 (15%)

heb ooit een klein lijstje gemaakt mbt elementengebruik, niet uitvoerig over tabellen en list verschillen, maar misschien dat je er toch iets aan hebt. Natuurlijk is de w3c spec de beste leidraad in eerste instantie

http://www.rikkertkoppes.com/thoughts/useful-constructions

quote:

DerKleinePunkt schreef op maandag 17 januari 2005 @ 23:33:
Even voor de goede orde, als ik het juist begrijp zijn tables dus toegestaan, gewenst in het geval van 2 dimensionale data?

Ik vind het allemaal een beetje overdreven met die tables. Waarom zou je ze niet gebruiken? Omdat het niet mag? Wie zegt dat? Ik snap best dat je goede code wilt opleveren, maar dit gaan in mijn ogen toch te ver. Hiervoor zou ik dus zeker weten een table gebruiken.

Heh jungs!

Met XHTML mag je toch helemaal geen tables gebruiken (das HTML!)? Divjes!

Neehoor met xhtml mag je ook tables gebruiken.

@Zemskii
In XHTML (net zoals in HTML overigens) is het niet nodig om tabellen te gebruiken voor layout. Voor layout gebruik je CSS. Het gebruik van tabellen voor het structueren van data is wat anders.

machuidel wijzigde dit bericht 18-01-2005 10:23 (15%)

quote:

Machuidel schreef op dinsdag 18 januari 2005 @ 10:15:
@Zemskii
In XHTML (net zoals in HTML overigens) is het niet nodig om tabellen te gebruiken voor layout. Voor layout gebruik je CSS. Het gebruik van tabellen voor het structueren van data is wat anders.

Dat laatste is een goed punt. Dat gaat bij mij geregeld mis, wat is "data" en wat is een "lijst". Een overzicht zoals de prijswatch is toch een lijst met product(informatie)? Maar aangezien het meerdere onderdelen van een product betreft (een beetje zoals een database veldstructuur) zou je voor zover mij nu duidelijk is tables kunnen / mogen gebruiken.

Het principe gaat als volgt:

- Wat is de "data" die moet worden beschreven? Bijv. Lijst van producten, lijst met links, legenda, een stuk uit een boek, een kopje (h) gerelateerd aan een stuk tekst (section) etc.

- Welke element in XHTML is het meest dichtbijzijnde semantische equivalent van de "data" die moet worden beschreven? Dus van welke XHTML element komt de betekenis het meest in de buurt van de "data" die moet worden beschreven? Bijv. <h1>titel</h1>, <h2>kopje</h2>, <h3>sub-kopje</h3>, <cite>een citaat</cite> etc.

- Als de meest dichtbijzijnde semantisch equivalente element in XHTML de betekenis van de "data" niet voldoende beschrijft, in welke klasse valt deze dan? Bijv. <address class="email">[e-mail]</address>, <h4 class="date">18-01-2005</h4> etc.

- Gebruik pas <div class="...."> als je echt geen zinnige XHTML element ervoor kan vinden.

Hou er rekening mee dat veel XHTML/HTML elementen een "default" stijl hebben die je zelf moet "overloaden":
http://www.w3.org/TR/REC-CSS2/sample.html

[update]
Nog wat belangrijke puntjes toegevoegd.
[/update]

machuidel wijzigde dit bericht 18-01-2005 14:08 (65%)

2 opmerkingen:

- stop niet al je emailadressen in een address, address is namelijk voor contact info van (een deel van) de site
- cite is de referentie naar het citaat, niet het citaat zelf:

quote: w3c

As <CITE>Harry S. Truman</CITE> said,
<Q lang="en-us">The buck stops here.</Q>

quote:

Met XHTML mag je toch helemaal geen tables gebruiken (das HTML!)? Divjes!

ik verwachtte al dat iemand dat ooit zou gaan zeggen. Alleen div'jes is net zo erg (zo niet erger) als tabellen voor layout gebruiken, semantiek is belangrijk. Maar dat geldt net zo goed voor html als voor xhtml. xhtml is niet semantischer, niet beter, niet gestructureerder en zeker niet meer accessible dan html.

spam over divgebruik

mophor wijzigde dit bericht 18-01-2005 12:16 (56%)

@Mophor
Een "cite" kan een citatie of bron referentie bevatten (bijv. een titel).

Hier staat het beschreven:
http://www.w3.org/TR/html401/struct/text.html#edef-CITE

machuidel wijzigde dit bericht 18-01-2005 12:40 (7%)

CITE mag geen citaties bevatten. Daarvoor gebruik je Q of BLOCKQUOTE. Het gebruik van DIV in plaats van TABLE is geenzins slechter. Geen semantiek is nog altijd beter dan verkeerde semantiek.

Nee, niet de quote zelf maar wel een citatie ervan.
Een citatie als zijnde een referentie.