Literatuurstudie: hoe maak ik een HTML tabel responsive

Om een HTML tabel goed leesbaar weer te geven (responsive) op een tablet of smartphone is er een aantal technieken mogelijk:

  1. Voeg een horizontale scrollbalk toe
  2. Verberg minder belangrijke kolommen
  3. Verander de layout van de tabel
  4. Of een combinatie van deze technieken

Scrollbalken toevoegen

Om te voorkomen dat de tabel middenin afkapt of te priegelig wordt weergegeven kun je een horizontale scrolbalk toevoegen. De bezoeker ziet dan dat er meer is en wat ze ziet is goed te lezen.

Russ Weakley heeft dit beschreven in A simple (and very rough) responsive table solution. Zet de tabel in een <div> die in de CSS een width krijgt van 100% en een auto overflow. Overflow werkt trouwens niet voor elk device.
Voor iOS moet daar nog extra webkit-scrollbar pseudo-elementen aan toegevoegd worden.
De scrollbar kan voor elke browser en device via een jQuery plugin geschikt worden gemaakt.

Responsive Tables by ZURB heeft met gebruik van jQuery een zeer gebruikersvriendelijk  versie: De eerste kolom bijft staan en de overige tabel wordt voorzien van een horizontale scrollbalk (demo op zurb.com).

Kolommen verbergen/tonen

Je kunt een tabel versmallen door niet essentiele kolommen te verbergen met CSS. Voordeel: het past op het scherm; nadeel: je bezoek mist data.

Om dit op te lossen kun je een keuzemenu toevoegen, zodat de bezoeker kan kiezen welke kolom ze wil zien.

Gehele layout aanpassen

Om toch alle data te laten zien op de breedte van het device, kun je de cellen in een tabel onder elkaar te tonen op smallere beeldschermen. Responsive Data Table Roundup door Chris Coyier laat dit zien (demo op css-tricks.com).

Conclusie

Welke optie je kiest is afhankelijk van het doel van de tabel en van je doelgroep.

  • Wil je dat de bezoeker een compleet overzicht houdt over de tabel dan is de oplossing van ZURB met het vastzetten van de eerste kolom mooi.
  • Wil je het supersimpel houden en de weergave intact houden, met kleine aanpassingen en zonder Javascript? Dan is de oplossing van Russ Weakley met de scrollbar het beste.
  • Heb je een tabel met veel kolommen en wil je je bezoek de keuze geven wat te zien, dan is de kolomselectie methode goed geschikt.
  • Wil je een goede en volledige weergave van de tabel zonder gebruik van JavaScript, dan kun je ervoor kiezen de layout van de kolom aan te passen en de cellen onder elkaar te plaatsen.

Eigen implementatie in WordPress

Deze studie heb ik gedaan naar aanleiding van een vraag van Iacobien Riezebosch. Zij heeft op haar WordPress site een aantal complexere tabellen die zij responsive wilde. Voor haar site hebben we gekozen voor de puur HTML/CSS oplossing van Chris Coyier.

Aanpassingen aan de HTML

Aan de tabel “Overzicht succescriteria WCAG 2.0” is het id “succescriteria” en aan de eerste rij (tr) met de kopjes (th) is de class “thead” toegevoegd. De id is gezet om verschillende soorten opmaak voor verschillende tabellen te kunnen maken. De class voor de tr is om de tabelkopjes visueel te kunnen verbergen. Deze code kun je toevoegen in de editor op Tekst-mode.

<table id="succescriteria">
<tbody>
<tr class="thead">
<th>Eerste kopje</th>`
<th>Tweede kopje</th>
<th>Derde kopje</th>
</tr>
<tr>
<td>Eerste inhoud</td>
... enz
</tbody>
</table>

Aanpassingen aan de CSS (style.css)

#content table {
width: 99%;
}


@media
only screen and (max-width: 760px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
#content table tr.thead {
position: absolute;
top: -9999px;
left: -9999px;
}

#content table td {
/* Behave like a "row" */
position: relative;
padding-left: 40%;
}


#content table td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/*
Label the data
*/
#succescriteria td:nth-of-type(1):before { content: "Eerste kopje"; }
#succescriteria td:nth-of-type(2):before { content: "Tweede kopje"; }
#succescriteria td:nth-of-type(3):before { content: "Derde kopje"; }
}

De tabelkopjes worden zo verborgen, de cellen onder elkaar gezet en voor de inhoud van de cellen het kopje geplaatst via de CSS3 pseudo-class nth-of-type en het pseudo-element before content.

Omdat de weergave alleen te zien is op tablets en smartphones en deze devices over het algemeen CSS3 ondersteunen is het geen probleem. De tabelstuctuur blijft intact, zo is ook de toegankelijkheid gewaarborgd. De tabel kan worden opgemaakt met lijntjes en kleurtjes. Simpel en doeltreffend lijkt me.
See it in action: Overzicht succescriteria WCAG 2.0

Advertisements

Author: Rian Rietveld

WordPress Engineer focussing on accessibility

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s