Tabeller

Enkel tabell

Populäraste hundnamnen
Plats	Namn	Antal
1	Molly	7 351
2	Bella	5 256
3	Ludde	4 043

<div class="c-table--responsive-container">
  <table aria-describedby="caption1" class="c-table">
    <caption id="caption1"> Populäraste hundnamnen </caption>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th class="align-right" scope="col">Plats</th>
        <th scope="col">Namn</th>
        <th class="align-right" scope="col">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

<div class="c-table--responsive-container">
  <table aria-describedby="caption2" class="c-table">
    <caption id="caption2"> Antal hundar och katter i Eksjö och Nässjö </caption>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th scope="col">Kommun</th>
        <th scope="col">Antal hundar</th>
        <th scope="col">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>
</div>

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

<div class="c-table--responsive-container">
  <table aria-describedby="caption3" class="c-table">
    <caption id="caption3"> Antal hundar efter typ av hushåll </caption>
    <colgroup>
      <col>
    </colgroup>
    <colgroup>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <td></td>
        <th class="align-right" scope="col">2018</th>
        <th class="align-right" scope="col">2017</th>
        <th class="align-right" scope="col">2016</th>
        <th class="align-right" scope="col">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>
</div>

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-table--responsive-container">
  <table aria-describedby="caption6" class="c-table">
    <caption id="caption6"> Hundar i hundstallet </caption>
    <colgroup>
      <col>
    </colgroup>
    <colgroup>
      <col>
      <col>
    </colgroup>
    <tbody>
      <tr class="c-table__header--col">
        <td></td>
        <th scope="col">Molly</th>
        <th 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 class="c-table__header--col">
        <td></td>
        <th scope="col">Wilma</th>
        <th 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
Jönköping
	Rum	Hyresrätt	Bostadsrätt	Villa
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-table--responsive-container">
  <table aria-describedby="caption7" class="c-table">
    <caption> Lediga boenden </caption>
    <colgroup id="caption7">
      <col>
    </colgroup>
    <colgroup>
      <col>
      <col>
      <col>
      <col>
    </colgroup>
    <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 class="c-table__header--col c-table__header--fullwidth">
        <th 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 class="c-table__header--col c-table__header--fullwidth">
        <th 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
Papper	Svartvit	A2	A3	A5

<div class="c-table--responsive-container">
  <table aria-describedby="caption5" class="c-table">
    <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
	Producerade	Sålda	Producerade	Sålda
	Januari		Februari
Soffor	50 000	30 000	100 000	80 000
Fåtöljer	10 000	5 000	12 000	9 000

<div class="c-table--responsive-container">
  <table aria-describedby="caption4" class="c-table">
    <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>