Gebruik van tabellen in fora

[Kiphaas7]

Zovaak wordt hier gezegd (en ik zelf heb het ook wel eens op andere plekken geroepen), dat tabellen voor tabulaire data zijn. Goed, je hebt dan de duidelijke voorbeelden van statistische data die je wilt weergeven op je site, maar ik vroeg me onlangs af of een tabel nou op zijn plaats is in een forum. Toch wel een van de meest voorkomende plekken waar ik kom en waar tabellen misgebruikt worden.

Als ik dan even veelgebruikte paketten erbij pak, zoals phpbb3, smf, ipb en vbulletin erbij pak dan zie ik al snel dat ipb en vbulletin geen ruk geven om semantisch gebruik van html tags. Tenminste, dat was mijn ervaring. SMF ook niet, maar ze beloven beterschap met smf2 (maargoed...)

phpbb3 heeft het roer radicaal omgegooid tov phpbb2 als het gaat om de default template. Ze gebruiken helemaal geen tabellen meer op de index pagina (waar je een lijst van je categorieen ziet).

SMF doet het zo (gekopieerd van site die ik mede beheer, daarom geblurred om eventuele beschuldigingen van sluikreclame te voorkomen ):


(klik voor groter plaatje)

De bijbehorende code, snel gestript van inline styles en andere meuk ( ) is nog best te verdedigen vind ik, dat een overzicht van de categorieen met bijbehorende stats etc onder tabulaire data valt. Ondanks dat, zodra je de rest van de source code ziet, ze niet hebben nagedacht erover en alles (dus ook simpele menu's) in tabellen hebben geplempt.

HTML:

        <table>
            <tr>
                <td><a href="#"><img src="#" alt="No New Posts" title="No New Posts" /></a>
                </td>
                <td>
                    <b><a href="#" name="b27">News and Announcements</a></b><br />
                        
                </td>
                <td><span class="smalltext">
                    1 Posts <br />
                    1 Topics
                </span></td>
                <td>
                    <span class="smalltext">
                        <b>Last post</b>  by <a href="#">foo3</a><br />
                        in <a href="#" title="foo4">foo4</a><br />
                        on May 30, 2007, 10:51:12 AM
                    </span>
                </td>
            </tr>
            <tr>
                <td><a href="#"><img src="#" alt="No New Posts" title="No New Posts" /></a>
                </td>
                <td class="windowbg2">
                    <b><a href="#" name="b34">News and Announcements Archive</a></b><br />
                        
                </td>
                <td><span class="smalltext">
                    91 Posts <br />
                    21 Topics
                </span></td>
                <td>
                    <span class="smalltext">
                        <b>Last post</b>  by <a href="#">foo4.5</a><br />
                        in <a href="#" title="foo5">foo5</a><br />
                        on Apr 07, 2007, 10:41:33 AM
                    </span>
                </td>
            </tr>
        </table>

phpbb3 pakt het totaal anders aan en wel op deze manier (gekopieerd van phpbb3.com). Ook deze methode vind ik verdedigbaar, een definition list:


(klik voor groter plaatje)

HTML:

        <div class="forabg">
            <div class="inner"><span class="corners-top"><span></span></span>
            <ul class="topiclist">
                <li class="header">
                    <dl class="icon">
                        <dt><a href="./viewforum.php?f=47">General</a></dt>
                        <dd class="topics">Topics</dd>
                        <dd class="posts">Posts</dd>
                        <dd class="lastpost"><span>Last post</span></dd>
                    </dl>
                </li>
            </ul>
            <ul class="topiclist forums">
            <li class="row">
            <dl class="icon" style="background-image: url(./styles/prosilver/imageset/forum_read.gif); background-repeat: no-repeat;">
                <dt title="No new posts">
                                        <a href="./viewforum.php?f=14" class="forumtitle">Announcements</a><br />
                    <span style="font-weight: bold">Read me first before posting anywhere!</span><br />Subscribe to the feed, available in <a href="http://www.phpbb.com/feeds/atom/" class="postlink"><img src="http://www.phpbb.com/theme/images/feed-icon-14x14.png" alt="Image" /> Atom</a> or <a href="http://www.phpbb.com/feeds/rss/" class="postlink"><img src="http://www.phpbb.com/theme/images/feed-icon-14x14.png" alt="Image" /> RSS</a> format.                                   </dt>
                                    <dd class="topics">214 <dfn>Topics</dfn></dd>
                    <dd class="posts">316 <dfn>Posts</dfn></dd>
                    <dd class="lastpost"><span>
                        <dfn>Last post</dfn> by <a href="./memberlist.php?mode=viewprofile&amp;u=2075" style="color: #009900;" class="username-coloured">Acyd Burn</a>                      <a href="./viewtopic.php?f=14&amp;p=3405675#p3405675"><img src="./styles/prosilver/imageset/icon_topic_latest.gif" width="11" height="9" alt="View the latest post" title="View the latest post" /></a> <br />on Thu Dec 13, 2007 3:30 pm</span>
                    </dd>
                            </dl>
        </li>
                </ul>

            <span class="corners-bottom"><span></span></span></div>

Beide voorbeelden willen hetzelfde, dus ze kunnen goed vergeleken worden denk ik.

Natuurlijk zou ik dit alles niet hier posten als ik het antwoord al wist. Welke van deze twee methoden is het beste; is 1 van de twee wel _de_ beste? Zoja, is er nog een andere, betere manier? Hebben de makers van phpbb3 gelijk of zijn ze te ver doorgegaan om maar tableless/xhtml/insert_modewoord te worden?

Mochten de meerderheid hier tabellen op zijn plaats vinden, dan wil ik nog even doorbabbelen over andere plekken in een forum, maar laten we het eerst bij deze houden.

[Fuzzillogic]

Forumoverzichten kun je nog wel als tabulaire data zien, maar de 'tekst' zelf niet meer. Of definition lists dan DE oplossing zijn zal ik niet zeggen, maar qua structuur en CSS is het wel flexibel, beter dan tabellen IMO. Ook voor nested fora, zoals usenet, zouden DL's beter op hun plek zijn dan tabellen.

Ik zou iig niet voor tabellen gaan

[Kiphaas7]

Fuzzillogic schreef op zaterdag 19 januari 2008 @ 00:18:
Forumoverzichten kun je nog wel als tabulaire data zien, maar de 'tekst' zelf niet meer. Of definition lists dan DE oplossing zijn zal ik niet zeggen, maar qua structuur en CSS is het wel flexibel, beter dan tabellen IMO. Ook voor nested fora, zoals usenet, zouden DL's beter op hun plek zijn dan tabellen.

Ik zou iig niet voor tabellen gaan

Ik heb het hier inderdaad alleen over forumoverzichten. Dus naar jouw mening zijn definition lists ook goed voor forumoverzichten?

Vraag bevestiging omdat je ook de 'tekst' noemt, ik neem aan dat je hier de daadwerkelijke posts (die dus niet op een index pagina staan) mee bedoelt. Typisch gevalletje van Kiphaas die met verwijswoorden aan het stoeien is

[SchizoDuckie]

Ik zou niet te moeilijk doen en gewoon de tabel gebruiken zoals ie is. Het ziet er uit als een tabel, het is typisch tabulaire data door de indeling die je er standaard van wil hebben dus het is in dit geval ook gewoon een tabel imo Mijn eigen persoonlijke vuistregel is: *NIET* proberen om een tabel na te bouwen met CSS met elementen die geen tabel voorstellen normaal. Als je van jezelf merkt dat je daar mee bezig bent ben je te laat ben je verkeerd bezig en moet je gewoon een tabel gebruiken

[ Voor 36% gewijzigd door SchizoDuckie op 19-01-2008 00:31 ]

[Kiphaas7]

SchizoDuckie schreef op zaterdag 19 januari 2008 @ 00:30:
Ik zou niet te moeilijk doen en gewoon de tabel gebruiken zoals ie is. Het ziet er uit als een tabel, het is typisch tabulaire data door de indeling die je er standaard van wil hebben dus het is in dit geval ook gewoon een tabel imo Mijn eigen persoonlijke vuistregel is: *NIET* proberen om een tabel na te bouwen met CSS met elementen die geen tabel voorstellen normaal. Als je van jezelf merkt dat je daar mee bezig bent ben je te laat ben je verkeerd bezig en moet je gewoon een tabel gebruiken

Tsja, met niet moeilijk doen ben ik een beetje laat, ik heb er nu al een hele topicstart aan gewijd.

Eigenlijk wel grappig de reacties van jullie twee, het zijn ongeveer de argumenten die ik tot nu toe in mijn hoofd heb opgevoerd. Helaas kon ik zelf niet tot een beslissing komen, hopelijk lukt dat hier wel.

Aan de andere kant van het tabel verhaal (als ik dat zo even denigrerend mag noemen) staat dat het een lijst is, waarin je van een item verschillende eigenschappen defineert. Probleem is dat dit eigenlijk, in iets andere bewoording, ook een definitie is van een tabel. Maar welke is nou de juiste....

Ik blijf maar rondjes draaien.

[ Voor 30% gewijzigd door Kiphaas7 op 19-01-2008 00:38 . Reden: gewijzigde reactie schizo correct quoten, en nuttig maken post ]

[.Alex]

Eerst was ik bang dat je alles in honderden div'jes zou gaan gooien, doe dan maar een tabel zou ik zeggen. Maar dat deed je niet.

Ik zou een forum gewoon in een tabel gooien. Volgens mij is het gewoon tabulaire data en hoort het gewoon in een tabel. Je hebt de kolommen: naam, datum en bericht. En elke post is een nieuwe rij. (Althans, zo zie ik het)

Tabellen gebruiken voor je opmaak zou ik afraden maar dit is gewoon het neerplempen van data.

Go for the table!

[Kiphaas7]

Honderden divjes gebruiken valt onder dezelfde categorie als tabellen voor opmaak gebruiken, het is inderdaad misbruik van een element.

.Alex schreef op zaterdag 19 januari 2008 @ 11:23:
Eerst was ik bang dat je alles in honderden div'jes zou gaan gooien, doe dan maar een tabel zou ik zeggen. Maar dat deed je niet.

Ik zou een forum gewoon in een tabel gooien. Volgens mij is het gewoon tabulaire data en hoort het gewoon in een tabel. Je hebt de kolommen: naam, datum en bericht. En elke post is een nieuwe rij. (Althans, zo zie ik het)

Tabellen gebruiken voor je opmaak zou ik afraden maar dit is gewoon het neerplempen van data.

Go for the table!

[ Voor 6% gewijzigd door Kiphaas7 op 19-01-2008 12:54 ]

[Blaise]

Als je een relatie hebt tussen drie of meer kolommen of rijen, dan spreek je vrijwel altijd over tabulaire data en is een tabel de oplossing. Een definition list is niet alleen omslachtig om te stylen, het is in dit geval ook gewoon misplaatst.

Overigens is een definition list niet toegankelijker dan een tabel voor screen readers, mits het gaat om tabulaire data, en je een scope specificieert waar nodig.

Bij het phpbb3 voorbeeld zullen gebruikers van screenreaders verdwalen.

[ Voor 5% gewijzigd door Blaise op 19-01-2008 14:41 ]