Responsiva tabeller

 

Tabeller används flitigt när man exempelvis jobbar med faktarutor. Att använda tabeller i en responsiv webbdesign kan ibland vara knepigt, speciellt om tabellerna har många och breda kolumner. Det kan vara en rejäl utmaning att få en stor tabell som ser bra ut på en bred skärm att även fungera bra på en mobil enhet med liten skärm.

ASCII-tabell

Strategier

Det finns olika vägar att gå för att lösa problemet: reducera data, krympa bredd, dölja information som kan rullas fram, eller stuva om strukturen.

1. Vid reducering av data så tar man helt sonika bort de kolumner som inte behövs i det lilla formatet. Man väljer vilket data som är viktigast och döljer resten.

2. När man krymper bredd så gör man helt enkelt en skalning som anpassar sig till bredden av fönstret. Man använder sig av det tomrum som ibland uppstår i kolumnerna. Denna variant kan funka till en viss del om man även skalar ner textstorlekar.

3. När man döljer information så minskas tabellen och det data som inte får plats i cellerna döljs men får en rullist undertill. När man rullar på listen eller drar med fingret i telefonen (swipe) så syns resten av innehållet i cellen.

4. Ytterligare en väg att gå är att stuva om strukturen i olika storlekar. Alltså att tabellen läggs om på ett annat sätt, exempelvis till en lista på en rad i mobilläge. En annan variant är att man vänder på axlarna, att det som var kolumner blir rader och tvärtom.

Alla metoder ovan kan användas var och en för sig eller i kombination. Det beror naturligtvis på vad som passar bäst.

Läs mer om responsiva tabeller: Responsive Tables Demo eller Responsive Tables

Märkta med: , , , ,
Publicerat i Allmänt
%d bloggare gillar detta: