<table> elementen en semantiek

[Dennis]

Voor een grote website die ik maak, ben ik het geheel zo toegankelijk mogelijk aan het maken. Dat wil zeggen dat ik op een juiste manier de elementen gebruik, volledig gebruik maak van xhtml en css en bovendien spraak-css doorvoer. Dit alles met als doel uiteindelijk een W3c AAA logo te kunnen gebruiken.

Ik ben nu bezig met een webshop onderdeel waarbij uiteraard een flink aantal categorieën aanwezig is. Inmiddels weet ik vrijwel zeker dat, gezien de complexiteit van de data, een tabel de beste keus is, geprefereerd boven <ul>.

De tabel heeft deze gegevens:

code:

|---------------------------------|
|naam     |aantal       |datum    |
|---------|-------------|---------|
|blabla   |1000         |28-03-05 |
|blabla   |1000         |28-03-05 |
|blabla   |1000         |28-03-05 |
|---------------------------------|

Nou is het zo dat ik de categorieën in 3 hoofdcategorieën wil onderverdelen. Je krijgt dan ongeveer dit:

code:

|---------------------------------|
|naam     |aantal       |datum    |
|---------------------------------|
|SPECIAAL                         |
|---------------------------------|
|aanb.    |1000         |28-03-05 |
|nieuw    |1000         |28-03-05 |
|---------------------------------|
|NEDERLAND                        |
|---------------------------------|
|blabla   |1000         |28-03-05 |
|blabla   |1000         |28-03-05 |
|---------------------------------|
|EUROPA                           |
|---------------------------------|
|blabla   |1000         |28-03-05 |
|blabla   |1000         |28-03-05 |
|---------------------------------|

Nou ben ik inmiddels redelijk bekend met de tags die ik kan gebruiken. Op deze pagina heb ik een hoop informatie opgedaan. Het gaat mij voornamelijk om het gebruik van <thead> en <tbody>. <tfoot> heb ik niet nodig voor mijn tabel tot dusver, tenzij ik ooit nog eens "totaal"-rijtjes wil maken. Nu niet van toepassing dus.

Omdat het mooie van <thead> is dat zij op meerdere pagina's wordt afgedrukt is het natuurlijk fijn om deze zo veel mogelijk te gebruiken.

Zelfs dacht ik aan dit:

code:

<table>
    <thead>
        <tr><th>Naam</th><th>aantal</th><th>datum</th></tr>
    </thead>
    <thead>
        <tr><th colspan="3">SPECIAAL</th></tr>
    </thead>
    <tbody>
        <tr><td>blabla...</td>...</tr>
    </tbody>
    <thead>
        <tr><th colspan="3">NEDERLAND</th></tr>
    </thead>
    <tbody>
        <tr><td>blabla...</td>...</tr>
    </tbody>
</table>

Het caption element en overige dingen heb ik even weggelaten voor de goede orde.

Een eventuele andere mogelijkheid is nog om met <rowgroup> te gaan werken. Ik vraag me echter af of dat in dit geval de beste oplossing is.

In hoeverre is de code zoals ik denk dat die het beste is ook écht het beste? Hoe kan ik op een zo duidelijk mogelijke manier weergeven hoe gegevens bij elkaar horen? Eventuele tips over wijzigingen in de structuur van de tabel zijn welkom, er staat niet iets vast boven alles, de semantiek is voor mij erg belangrijk.

Alvast bedankt.

[ Voor 18% gewijzigd door Dennis op 24-03-2005 22:39 ]

[Verwijderd]

Zover ik weet kan (mag) een table maar 1 thead bevatten.. daarnaast moet je nog steeds th elementen gebruiken binnen de thead.
Wat je zou kunnen doen is meerdere tbody's opnemen voor de verschillende groepen met daarin th elementen voor de subkoppen. Misschien moet je ook eens kijken naar het scope attribute van het th element.
Is je doel daadwerkelijk om een AAA logo te kunnen voeren of om een toegankelijke site te bouwen?

[Dennis]

Het logo komt toch niet op de site te staan dus het gaat mij voornamelijk om de toegankelijkheid. Ik wil wel zoveel mogelijk AAA richtlijnen overnemen maar de pagina schaalt niet mee in de breedte dus voldoet hij toch niet op alle punten zover ik heb begrepen.

Die th-elementen gebruik ik inderdaad in de thead, heb het verkeerd overgetypt en inmiddels aangepast .

[ Voor 18% gewijzigd door Dennis op 24-03-2005 22:39 ]

[crisp]

Persoonlijk zou ik meer zoiets doen:

HTML:

<table>
    <thead>
        <tr>
            <th>Naam</th>
            <th>aantal</th>
            <th>datum</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">SPECIAAL</th>
        </tr>
        <tr>
            <td>blabla...</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="3">NEDERLAND</th>
        </tr>
        <tr>
            <td>blabla...</td>
        </tr>
    </tbody>
</table>

[Dennis]

Dat is inderdaad ook een mogelijkheid, je hebt dan niet de tbody-groepen op elke printpagina maar dat is niet een must ofzo, al zou het wel handig zijn.

[Verwijderd]

En gebruik dan ook even scope="rowgroup" oid. Op mozilla.org staat wel een mooi voorbeeld daarvan: http://www.mozilla.org/releases/history.html

[BetuweKees]

ik zou inderdaad zoals hierboven de pagina ook opmaken met behulp van meedere tbody's, colgroups en scope's. eventueel zou je (zoals je waarschijnlijk ook al in de w3c voorbeelden hebt gelezen) nog gebruik kunnen maken van 'axis' en 'headers' om een en ander nog toegankelijker te maken, maar naast het feit dat ik hierdood de broncode enkel onoverzichtelijker vind worden, is er volgens mij ook nog geen enkele browser die er echt iets mee doet (wat natuurlijk niet zegt dat je het daarom zou moeten negeren, maar goed, dat is een afweging die je kunt maken)

edit:
oja, mijn ervaring leert me dat firefox het om een of andere manier niet leuk vind als je je kolombreedtes gaat aanpassen doormiddel van css op de colgroup, zich regelmatig uitend in het niet volgen van de css regels of zelfs een crash. verwacht dat een en ander vast wel gefixed gaat worden, maar mocht je er erg veel last van hebben, dan kan het de moeite zijn om de breedte van je cols aan te passen doormiddel van css op de td's

[ Voor 31% gewijzigd door BetuweKees op 25-03-2005 12:21 ]

[Dennis]

Met jullie hulp ben ik er uit. Ik heb gekozen voor de oplossing van crisp omdat die mij toch wel vrij logisch leek. De tabel ziet er nu als volgt uit:

code:

<table cellspacing="0">
    <caption>Categorieën van de stukken in de prijslijst</caption>
    <thead>
        <tr>
            <th scope="col">Categorienaam</th>
            <th scope="col">Aantal</th>
            <th scope="col">Laatste wijziging</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="3">Speciaal</th>
        </tr>
        <tr>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="3">Nederland</th>
        </tr>
        <tr>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th colspan="3">Europa</th>
        </tr>
        <tr>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
            <td><a href="">{bla}</a></td>
        </tr>
    </tbody>
</table>

Het gebruik van axis en headers zie ik nu nog niet echt als nuttig. Zeker bij headers komt er wel erg veel code bij kijken. Axis zie ik nog niet geïmplementeerd worden en hoewel ik opzich wel een early-adapt fan ben lijkt dit nog wel een alpha stadium .

Voorlopig kan ik mijn tabelletje prima stylen in Mozilla en ook Internet Explorer slikt grotendeels de uitgebreide CSS die ik gebruik om mijn tabel vorm te geven in grafische browsers.

[ Voor 28% gewijzigd door Dennis op 25-03-2005 21:33 ]

[Verwijderd]

Je kan op z'n minst SCOPE toevoegen.

[Verwijderd]

en summary en abbr

en title bij die links

headers is idd niet echt nodig voor zo'n simpele tabel, zeker als je al scope gebruikt (maar dan moet je dat wel doen natuurlijk)

[ Voor 124% gewijzigd door Verwijderd op 26-03-2005 11:27 ]