Mall För tabell och boll
Designprotokoll för tabellen som ligger både på AINNOVA.SE, gOOGE sITES OCH nOTION
Översikt
Denna tabell används för att visa AINNOVAs prissättning på ett tydligt och organiserat sätt. Den är uppdelad i kategorier (t.ex. "Rådgivning & Utbildning") och visar tjänster, priser och beskrivningar. Tabellen är designad för att vara lättläst, responsiv och interaktiv, med klickbara knappar för varje tjänst.
Färger
Här är de färger som används i tabellen:
Rubriker (översta raden): Mörkblå (#007BBF) med vit text (#FFFFFF).
Rader: Varannan rad är vit (#FFFFFF) och varannan är ljusgrå (#E6EBF1).
Tjänstknappar: Ljusgrön (#9FE754) med mörkgrå text (#333333).
Hover på tjänstknappar: Mörkare grön (#3A8C2D) med vit text (#FFFFFF).
Fokusindikator: Mörkblå (#007BBF).
Beskrivningstext: Mörkgrå (#56585E, den som används på Ainnova som lite mindre mörk text).
Kategoritext: Mörkgrå (#333333).
Ramar runt celler: Ljusgrå (#D9D9D9).
Rubriktext ovanför tabellen: Ljusgrå bakgrund (#E6EBF1) med mörkgrå text (#333333).
Färger (tillägg)
- Sidbakgrund (valfri): Vit (#FFFFFF) – används för hela sidan för att ge en fräsch känsla.
- Wrapper-bakgrund (valfri): Mörkblå (#007BBF) – används runt containern för kontrast mot vit innehållsbox.
Anmärkning: Dessa färger är inte en del av tabellen utan kan användas för att rama in den på ett estetiskt sätt.
Utseende
Tabellen har en tunn grå ram (#D9D9D9) runt varje cell för att separera innehållet.
Den har en subtil skugga runt hela tabellen för att ge ett lyft från bakgrunden.
Tjänstknapparna i andra kolumnen är rundade (5px hörnradie) och har padding för att se ut som klickbara knappar.
Kategorikolumnen (första kolumnen) har en liten ikon (48x48px på desktop, 40x40px på mobil) med en vit ram och skugga.
En rubriktext ("AINNOVAs prissättning för tjänster och paket (exkl. moms)") visas ovanför tabellen i en ljusgrå ruta (#E6EBF1) med mörkgrå text (#333333).
Text och typografi
Rubriker (översta raden):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 16px på desktop, 14px på mobil.
Färg: Vit (#FFFFFF).
Stil: Versaler och fetstil.
Kategoritext (första kolumnen):
Typsnitt: Montserrat.
Storlek: 16px på desktop, 14px på mobil.
Färg: Mörkgrå (#333333).
Stil: Fetstil.
Tjänstknappar (andra kolumnen):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 20px på desktop, 16px på mobil.
Färg: Mörkgrå (#333333), ändras till vit (#FFFFFF) vid hover.
Stil: Fetstil.
Pris och beskrivning (tredje och fjärde kolumnen):
Typsnitt: Lato (eller Arial som reserv).
Storlek: 16px på desktop, 14px på mobil.
Färg: Mörkgrå (#333333) för pris, något ljusare mörkgrå (#56585E) för beskrivning.
Interaktivitet
Tjänstknappar:
Klickbara knappar som öppnar en länk till tjänstens sida i en ny flik.
Vid hover ändras bakgrunden till mörkare grön (#3A8C2D) och texten blir vit (#FFFFFF).
Vid fokus får knappen en blå ram (#007BBF) runt sig.
Responsivitet:
På desktop och tablet visas alla kolumner (Kategori, Tjänst/paket, Pris, Beskrivning).
På mobil döljs Kategori- och Beskrivningskolumnerna, och tabellen fokuserar på Tjänst/paket och Pris, med en layout som staplar raderna för bättre läsbarhet.
Hur du kan se koden (för nyfikna)
Om du vill titta på koden bakom tabellen för att se hur den är byggd, kan du följa dessa steg. Det är ett enkelt sätt att lära sig mer om hur webbsidor fungerar!
Högerklicka på tabellen:
Om du vill se koden för hela tabellen, högerklicka någonstans på tabellen (t.ex. på en rad eller en cell).
Välj "Inspektera":
När du högerklickar dyker en meny upp. Välj "Inspektera" (på vissa webbläsare kan det heta "Inspektera element").
Detta öppnar webbläsarens utvecklarverktyg, där du kan se både HTML-koden (strukturen) och CSS-koden (stilen) för tabellen.
Obs: Om du väljer "Visa sidkälla" – det alternativet visar den råa HTML-koden för hela sidan och även om det då är svårare att använda den för att hitta specifika delar i tabellen så kan den ändå vara bra att visa upp en hel sida för ett LLM. "Inspektera" bruka föredras eftersom det zoomar in på just den del du klickade på!
Hitta tabellens kod:
I utvecklarverktygen ser du en massa kod. Leta efter <table>taggen – det är starten på tabellen.
Du kan också titta efter klasser som .service-column (för tjänstknapparna), .price-column (för priserna), eller .category-cell (för kategorikolumnerna) för att se hur de är stylade.
Zooma in på en specifik del (valfritt):
Om du bara vill se koden för en viss del av tabellen, t.ex. en tjänstknapp, högerklickar du direkt på den knappen och väljer "Inspektera". Då hoppar utvecklarverktygen direkt till den delen av koden.
Tips: Om du ser en massa kod och det känns rörigt, prova att klicka på små pilar bredvid taggarna i utvecklarverktygen för att "fälla ut" eller "fälla ihop" olika delar. Det gör det lättare att hitta det du letar efter!
