Styleguide

Informationstabell

Använd denna tabell när du vill visa information på ett överskådlig sätt i rader och kolumner. Tabellerna som visas här är enkla tabeller som endast visar information.

Design och språk

Texten på rubriker

  • Ska vara kort och tydlig.
  • Ska helst inte innehålla förkortningar och tecken som till exempel snedstreck.
  • Ska börja med stor bokstav.

Placering av innehåll i cellerna

För att det ska vara lätt att läsa informationen i tabellen ska

  • celler med text vara vänsterjusterade
  • celler med tal vara högerjusterade.

Centrerad text är svårläst så undvik det.

Responsiva tabeller

Det är svårt att göra tabeller fullt responsiva. Ett sätt för att göra tabeller scrollbara på små slärmar är att använda utility-klassen "c-responsive-table-container".

Komponenter och kod

Komponenten driftsattes första gången i version 1.0.0.

Det finns sju olika tabeller som du kan välja mellan beroende på vilken information tabellen ska innehålla. Tabellerna är ännu inte responsiva men det kommer i en senare leverans.

Enkel tabell

Populäraste hundnamnen
Plats Namn Antal
1 Molly 7 351
2 Bella 5 256
3 Ludde 4 043
HTML 
<div class="c-table--responsive-container">
 <table class="c-table">
  <caption>Populäraste hundnamnen</caption>
  <colgroup>
  <col>
  <col>
  <col>
  </colgroup>
  <thead>
    <tr>
      <th class="align-right">Plats</th>
      <th>Namn</th>
      <th class="align-right">Antal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-right">1</td>
      <td>Molly</td>
      <td class="align-right">7 351</td>
    </tr>
    <tr>
      <td class="align-right">2</td>
      <td>Bella</td>
      <td class="align-right">5 256</td>
    </tr>
    <tr>
      <td class="align-right">3</td>
      <td>Ludde</td>
      <td class="align-right">4 043</td>
    </tr>
  </tbody>
 </table>
</div>

Enkel tabell med summering

Antal hundar och katter i Eksjö och Nässjö
Kommun Antal hundar Antal katter
Eksjö 2 102 1 255
Nässjö 1 555 992
Summa 3 657 2 247
HTML 
<table class="c-table">
    <caption id="caption2">Antal hundar och katter i Eksjö och Nässjö</caption>
    <colgroup>
    <col>
    <col>
    </colgroup>
    <thead>
        <tr>
            <th>Kommun</th>
            <th>Antal hundar</th>
            <th>Antal katter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Eksjö</td>
            <td class=align-right>2 102</td>
            <td class=align-right>1 255</td>
        </tr>
        <tr>
            <td>Nässjö</td>
            <td class=align-right>1 555</td>
            <td class=align-right>992</td>
        </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>Summa</td>
        <td class=align-right>3 657</td>
        <td class=align-right>2 247</td>
    </tr>
    </tfoot>
</table>

Tabell med topp- och vänstermeny

Antal hundar efter typ av hushåll
2018 2017 2016 2015
Hushåll med barn 220 000 219 015 221 111 251 515
Hushåll utan barn 522 548 556 555 550 000 524 442
En vuxen 126 796 154 005 118 554 112 554
Fler än en vuxen 408 454 410 001 415 054 422 555
HTML 
<table class="c-table">
    <caption>Antal hundar efter typ av hushåll</caption>
    <colgroup>
    <col>
    </colgroup>
    <colgroup>
    <col>
    <col>
    <col>
    <col>
    <col>
    </colgroup>
    <thead>
        <tr>
            <td></td>
            <th class=align-right>2018</th>
            <th class=align-right>2017</th>
            <th class=align-right>2016</th>
            <th class=align-right>2015</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Hushåll med barn</th>
            <td class=align-right>220 000</td>
            <td class=align-right>219 015</td>
            <td class=align-right>221 111</td>
            <td class=align-right>251 515</td>
        </tr>
        <tr>
            <th scope="row">Hushåll utan barn</th>
            <td class=align-right>522 548</td>
            <td class=align-right>556 555</td>
            <td class=align-right>550 000</td>
            <td class=align-right>524 442</td>
        </tr>
        <tr>
            <th scope="row">En vuxen</th>
            <td class=align-right>126 796</td>
            <td class=align-right>154 005</td>
            <td class=align-right>118 554</td>
            <td class=align-right>112 554</td>
        </tr>
        <tr>
            <th scope="row">Fler än en vuxen</th>
            <td class=align-right>408 454</td>
            <td class=align-right>410 001</td>
            <td class=align-right>415 054</td>
            <td class=align-right>422 555</td>
        </tr>
    </tbody>
</table>

Tabell med flera rubriknivåer 1

Hundar i hundstallet
Molly Ludde
Kontakt Lennart Andersson Sofia Berg
Relation Husse Matte
E-post Lennart@exempel.com Sofia@exempel.com
Wilma Neo
Kontakt Olle Bylynd Kajsa Kvist
Relation Husse Matte
E-post Olof@exampel.com Kajsa@exampel.com
HTML 
<div class="c-table--responsive-container">
    <table class="c-table">
        <caption>
            Hundar i hundstallet
        </caption>
        <colgroup>
            <col>
        </colgroup>
        <colgroup>
            <col>
            <col>
        </colgroup>
        <tbody>
            <tr>
                <td class="c-table__header--col"></td>
                <th class="c-table__header--col" scope="col">Molly</th>
                <th class="c-table__header--col" scope="col">Ludde</th>
            </tr>
            <tr>
                <th scope="row">Kontakt</th>
                <td>Lennart Andersson</td>
                <td>Sofia Berg</td>
            </tr>
            <tr>
                <th scope="row">Relation</th>
                <td>Husse</td>
                <td>Matte</td>
            </tr>
            <tr>
                <th scope="row">E-post</th>
                <td>Lennart@exempel.com</td>
                <td>Sofia@exempel.com</td>
            </tr>
            <tr>
                <th class="c-table__header--col"></th>
                <th class="c-table__header--col" scope="col">Wilma</th>
                <th class="c-table__header--col" scope="col">Neo</th>
            </tr>
            <tr>
                <th scope="row">Kontakt</th>
                <td>Olle Bylynd</td>
                <td>Kajsa Kvist</td>
            </tr>
            <tr>
                <th scope="row">Relation</th>
                <td>Husse</td>
                <td>Matte</td>
            </tr>
            <tr>
                <th scope="row">E-post</th>
                <td>Olof@exampel.com</td>
                <td>Kajsa@exampel.com</td>
            </tr>
        </tbody>
    </table>
</div>

Tabell med flera rubriknivåer 2

Lediga boenden
Rum Hyresrätt Bostadsrätt Villa
Jönköping
1 sovrum 13 21 22 3
2 sovrum - 23 43 30
3 sovrum - 16 32 40
Huskvarna
1 sovrum 13 21 22 3
2 sovrum - 23 43 30
3 sovrum - 16 32 40
HTML 
<div class="c-table--responsive-container">
    <table class="c-table">
        <colgroup>
            <col>
        </colgroup>
        <colgroup>
            <col>
            <col>
            <col>
            <col>
        </colgroup>
        <caption>
            Lediga boenden
        </caption>
        <thead class="align-right">
            <tr>
                <td></td>
                <th scope="col">
                    Rum
                </th>
                <th scope="col">
                    Hyresrätt
                </th>
                <th scope="col">
                    Bostadsrätt
                </th>
                <th scope="col">
                    Villa
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="c-table__header--fullwidth c-table__header--col" colspan="5" scope="colgroup">
                    Jönköping
                </th>
            </tr>
            <tr>
                <th scope="row">1 sovrum</th>
                <td>13</td>
                <td>21</td>
                <td>22</td>
                <td>3</td>
            </tr>
            <tr>
                <th scope="row">2 sovrum</th>
                <td>-</td>
                <td>23</td>
                <td>43</td>
                <td>30</td>
            </tr>
            <tr>
                <th scope="row">3 sovrum</th>
                <td>-</td>
                <td>16</td>
                <td>32</td>
                <td>40</td>
            </tr>
            <tr>
                <th class="c-table__header--fullwidth c-table__header--col" colspan="5" scope="colgroup">
                    Huskvarna
                </th>
            </tr>
            <tr>
                <th scope="row">1 sovrum</th>
                <td>13</td>
                <td>21</td>
                <td>22</td>
                <td>3</td>
            </tr>
            <tr>
                <th scope="row">2 sovrum</th>
                <td>-</td>
                <td>23</td>
                <td>43</td>
                <td>30</td>
            </tr>
            <tr>
                <th scope="row">3 sovrum</th>
                <td>-</td>
                <td>16</td>
                <td>32</td>
                <td>40</td>
            </tr>
        </tbody>
    </table>
</div>

Tabell med flera rubriknivåer 3

Inventering av förrådet
Produkt Färg Storlek
Kuvert Färg A2 A3 A4
Svartvit A1 A2 A3
Med logga A3 A4 A5
Papper Färg A1 A3 A4
Svartvit A2 A3 A5
HTML 
<div class="c-table--responsive-container">
    <table class="c-table">
        <caption>
            Inventering av förrådet
        </caption>
        <colgroup>
            <col>
        </colgroup>
        <colgroup>
            <col>
        </colgroup>
        <colgroup span="3"></colgroup>
        <thead>
            <tr class="align-center">
                <th scope="col">Produkt</th>
                <th scope="col">Färg</th>
                <th colspan="3" scope="colgroup">Storlek</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="3" scope="rowgroup">Kuvert</th>
                <th scope="row">Färg</th>
                <td>A2</td>
                <td>A3</td>
                <td>A4</td>
            </tr>
            <tr>
                <th scope="row">Svartvit</th>
                <td>A1</td>
                <td>A2</td>
                <td>A3</td>
            </tr>
            <tr>
                <th scope="row">Med logga</th>
                <td>A3</td>
                <td>A4</td>
                <td>A5</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <th rowspan="2" scope="rowgroup">Papper</th>
                <th scope="row">Färg</th>
                <td>A1</td>
                <td>A3</td>
                <td>A4</td>
            </tr>
            <tr>
                <th scope="row">Svartvit</th>
                <td>A2</td>
                <td>A3</td>
                <td>A5</td>
            </tr>
        </tbody>
    </table>
</div>

Tabell med flera rubriknivåer 4

Producerade och sålda möbler per månad
Januari Februari
Producerade Sålda Producerade Sålda
Soffor 50 000 30 000 100 000 80 000
Fåtöljer 10 000 5 000 12 000 9 000
HTML 
<div class="c-table--responsive-container">
    <table class="c-table">
        <caption>Producerade och sålda möbler per månad</caption>
        <colgroup>
            <col>
        </colgroup>
        <colgroup span="2"></colgroup>
        <colgroup span="2"></colgroup>
        <thead>
            <tr class="align-center">
                <td rowspan="2"></td>
                <th colspan="2" scope="colgroup">Januari</th>
                <th colspan="2" scope="colgroup">Februari</th>
            </tr>
            <tr class="align-right">
                <th scope="col">Producerade</th>
                <th scope="col">Sålda</th>
                <th scope="col">Producerade</th>
                <th scope="col">Sålda</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Soffor</th>
                <td class="align-right">50 000</td>
                <td class="align-right">30 000</td>
                <td class="align-right">100 000</td>
                <td class="align-right">80 000</td>
            </tr>
            <tr>
                <th scope="row">Fåtöljer</th>
                <td class="align-right">10 000</td>
                <td class="align-right">5 000</td>
                <td class="align-right">12 000</td>
                <td class="align-right">9 000</td>
            </tr>
        </tbody>
    </table>
</div>

Exempel

Vi håller just nu på och uppdaterar vårat exempel på tabeller.

Senast publicerad

Sidansvarig för sidan är Styleguide