Tabeller

Använd en 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. Flera varianter av tabeller, som sorterbara och redigeringsbara tabeller, kommer att läggas till i en senare leverans.

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.

Komponenter och kod

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
<table class="c-table" aria-label="" aria-describedby="caption1">
  <caption id="caption1">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>

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
<table class="c-table" aria-label="" aria-describedby="caption2">
    <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
<table class="c-table" aria-label="" aria-describedby="caption3">
    <caption id="caption3">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
<div class="c-responsive-table-container">
    <table class="c-table" aria-label="" aria-describedby="caption6">
        <caption id="caption6">
            Hundar i hundstallet
        </caption>
        <colgroup>
            <col>
        </colgroup>
        <colgroup>
            <col>
            <col>
        </colgroup>
        <tbody>
            <tr>
                <td class="inline-header"></td>
                <th class="inline-header" scope="col">Molly</th>
                <th class="inline-header" 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="inline-header"></th>
                <th class="inline-header" scope="col">Wilma</th>
                <th class="inline-header" 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
<div class="c-responsive-table-container">
    <table class="c-table" aria-label="" aria-describedby="caption7">
        <colgroup id="caption7">
            <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="full-width-header inline-header" 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="full-width-header inline-header" 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
<div class="c-responsive-table-container">
    <table class="c-table" aria-label="" aria-describedby="caption5">
        <caption id="caption5">
            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
<div class="c-responsive-table-container">
    <table class="c-table" aria-label="" aria-describedby="caption4">
        <caption id="caption4">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>50 000</td>
                <td>30 000</td>
                <td>100 000</td>
                <td>80 000</td>
            </tr>
            <tr>
                <th scope="row">Fåtöljer</th>
                <td>10 000</td>
                <td>5 000</td>
                <td>12 000</td>
                <td>9 000</td>
            </tr>
        </tbody>
    </table>
</div>

Senast publicerad 2020-09-10

Sidansvarig för sidan är Styleguide