Logga in
 |
En tabell som anpassas efter den enhet som används för att visa webbplatsen kallas för mobil eller responsive tabell. De webbplatser som byggs idag måste vara anpassade för visning i olika enheter som dator, surfplatta och smartphone mm.
Tabeller innehåller ofta uppställningar där innehållet visas i rader och kolumner och måste hållas ihop för att besökaren ska kunna överblicka innehållet. En mobil enhet kan ha så liten bredd på skärmytan att tabeller måste scrollas för att visa hela innehållet.
En tabell som inte är responsiv visar samma innehåll oavsett storlek på bildskärmen. Om sidan visas på en dator eller surfplatta kanske innehållet kan läsas och scrollas utan att zooma sidan, om sidan visas på en smartphone så zoomas innehållet ut för att visas i sin helhet och texten blir då så liten att den är svår att läsa.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret:
På en smartphone visas hela sidans innehåll vilket innebär att sidan zoomas ut vilket gör texten svår att läsa:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
Vårt första exempel på en responsiv tabell är att dölja kolumner som inte är absolut nödvändiga att visa på alla enheter.
Hela tabellens innehåll visas på enheter med större skärmbredd än 768 pixlar. På mindre skärmar än 768 pixlar visas en sammanfattning av innehållet där ett antal kolumner dolts.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret. Notera att kolumnerna nr 2-6 är dolda:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
Vårt andra exempel på en responsiv tabell är att göra så att det går att bläddra i tabellen oberoende av sidans övriga innehåll.
Hela tabellens innehåll visas på enheter med större skärmbredd än 768 pixlar. På mindre skärmar än 768 pixlar visas en informationsruta som anger att det går att bläddra i tabellen.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret. Notera informationsrutan som visas. OIbservera att det är tabellen som är scrollbar och inte sidans innehåll:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
Vårt tredje exempel på en responsiv tabell är att göra så att det går att bläddra i tabellen oberoende av sidans övriga innehåll med hjälp av jQuery.
Hela tabellens innehåll visas på enheter med större skärmbredd än 768 pixlar. På mindre skärmar än 768 pixlar delas tabellen upp i två block som är bläddringsbara var för sig.
Så här kan exemplet se ut i webbläsaren i full bredd:
Så här kan exemplet se ut i webbläsaren med minskad bredd på webbläsarfönstret. Notera de två blocken som är scrollbara var för sig:
Du kan se hur exemplet ovan ser ut i olika enheter och olika storlekar på bildskärmar hos Responsinator.com »
Klicka på ikonen nedan för att läsa hela guiden med kod och beskrivningar!
|
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!
skriv ut »