Webové komponenty

Tabuľky

Komponent tabuľka použite ak chcete používateľom prehľadne zobraziť údaje. V tabuľke môže používateľ porovnávať údaje po riadkoch a stĺpcoch. Nepoužívajte tabuľku ako formu rozloženia obsahu na stránke. Na to slúži systém rozloženia na stránke tzv. grid.

Z čoho sa skladá tabuľka?

Tabuľka sa skladá z:

  1. nadpisu,
  2. filtra,
  3. tabuľky,
  4. pätičky tabuľky.

Nadpis tabuľky

Tabuľka nemusí mať nutne nadpis. Ak použijete tabuľku v rámci obsahu, ktorý má vlastný nadpis a tabuľka je logickým doplnením údajov, vtedy nadpis nie je žiaducí.

Ak tabuľka stojí samostatne, dajte jej nadpis aby výstižne popisoval, aké údaje tabuľka zobrazuje. Použite nadpis, ktorý bude sémanticky korektný na zobrazovanej stránke.

Nadpis tabuľky môže obsahovať aj popis, ak je potrebné dovysvetliť alebo popísať zobrazované údaje či ozrejmiť metodiku zberu údajov a podobne.

V nadpise hlavičky môžete použiť aj prepínače. Prepínačmi môžete zobrazovať 2 údajové sady v jednej tabuľke. Pri zobrazovaní 2 údajových sád myslite na to, že údaje spravidla musia mať súvisiaci obsah. Nezobrazujte používateľovi v tabuľkovom komponente prostredníctvom prepínačov napríklad údaje o denných teplotách a finančné údaje firmy. V takomto prípade údaje rozdeľte do samostatných tabuliek s jednoznačným označením.

Ak bude potrebné popísať či vysvetliť údajové sady, môžete použiť nadpis s prepínačmi a popisom.

Filter

Filter umožní používateľom vybrať si údaje podľa ich potrieb. Filter nepoužívajte pri tabuľkách s malým množstvom údajov.

Filter je vždy umiestnený nad tabuľkou a v prednastavenom stave je zabalený. Obsahuje polia, na základe ktorých je možné vykonávať filtrovacie operácie nad tabuľkou.

Použitie filtrovacích polí popíšte tak, aby im používatelia rozumeli. Ak je to potrebné, dajte používateľovi vedieť aký formát vstupných údajov do filtra vyžadujete, napríklad formát rodného čísla.

Po zvolení a výbratí filtrov sa zobrazia položky vybratých filtrov . Tieto položky je možné zrušiť všetky, respektívne zrušiť vybrané položky filtra.

Jednoduchý filter

Jednoduchý tabuľkový filter použite s tabuľkou, v ktorej sa nachádza väčšie množstvo údajov. Obsahuje tematicky nezačlenené polia, na základe ktorých sa budú filtrovať údaje v tabuľke.

Zložitý filter

Zložitý tabuľkový filter použite s tabuľkou, v ktorej sa nachádza veľké množstvo údajov, napríklad ak sa jedná o zobrazovanie údajov z agendového informačného systému. Polia, na základe ktorých sa budú filtrovať údaje v tabuľke sú tematicky začlenené podľa jednotlivých okruhov, napríklad filter pre bydlisko(adresu) - môže obsahovať polia pre filtráciu kraja, okresu, obce a podobne.

Tabuľka - varianty

Tabuľka je prispôsobená objemu údajov, ktoré sa v nej budú prezentovať a podľa toho sa prispôsobí.

Ak budete prezentovať malé množstvo údajov odporúčame použiť tabuľku bez zoraďovacích tlačidiel a bez vertikálneho a horizontálneho posuvníka.

Dátum Deň Názov
1.Január piatok Deň vzniku Slovenskej republiky
2.Apríl piatok Veľký piatok - deň pracovného pokoja
1.Máj nedeľa Sviatok práce
5.Júl pondelok Sviatok svätého Cyrila a Metoda
29.August nedeľa Výročie SNP
1.September streda Deň Ústavy Slovenskej republiky
1.November pondelok Sviatok všetkých svätých
24.December piatok Štedrý deň - deň pracovného pokoja
Zdroj: vlada.gov.sk
<div data-module="idsk-table" id="priklad-1">

  

  <table class="idsk-table" >

<thead class="idsk-table__head">
      <tr class="idsk-table__row">
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Dátum
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Deň
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Názov
          </span>
        </th>
      </tr>
    </thead>
    <tbody class="idsk-table__body" style="">
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.Január</td>
            <td class="idsk-table__cell">piatok</td>
            <td class="idsk-table__cell">Deň vzniku Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">2.Apríl</td>
            <td class="idsk-table__cell">piatok</td>
            <td class="idsk-table__cell">Veľký piatok - deň pracovného pokoja</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.Máj</td>
            <td class="idsk-table__cell">nedeľa</td>
            <td class="idsk-table__cell">Sviatok práce</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">5.Júl</td>
            <td class="idsk-table__cell">pondelok</td>
            <td class="idsk-table__cell">Sviatok svätého Cyrila a Metoda</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">29.August</td>
            <td class="idsk-table__cell">nedeľa</td>
            <td class="idsk-table__cell">Výročie SNP</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.September</td>
            <td class="idsk-table__cell">streda</td>
            <td class="idsk-table__cell">Deň Ústavy Slovenskej republiky</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">1.November</td>
            <td class="idsk-table__cell">pondelok</td>
            <td class="idsk-table__cell">Sviatok všetkých svätých</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">24.December</td>
            <td class="idsk-table__cell">piatok</td>
            <td class="idsk-table__cell">Štedrý deň - deň pracovného pokoja</td>
          </tr>
    </tbody>
  </table>

    <div class="idsk-table__meta">
      <div class="idsk-button-group idsk-table__meta-buttons">

      </div>

        <div class="govuk-body idsk-table__meta-source">
          Zdroj: 
            <a class="govuk-link" href="https://www.vlada.gov.sk/statne-sviatky/" target="_blank" title="vlada.gov.sk">vlada.gov.sk</a>
        </div>
    </div>
</div>

V prípade, že budete zobrazovať taký počet stĺpcov, že to bude podľa veľkosti obrazovky potrebné, tabuľka bude obsahovať aj horizontálny posuvník aby sa údaje zobrazovali korektne.

Ak bude potrebné posúvať riadky v tabuľke, zobrazí sa vertikálny posuvník. Hlavička ostane pripnutá na vrchu. V takomto prípade odporúčame zobraziť aj zoraďovacie tlačidlá pre každý stĺpec. Zoraďovanie umožní používateľovi zoradiť si údaje podľa jeho potrieb a preferencií. Zoraďovacie tlačidlá reprezentujú vizuálnu podobu, no neslúžia ako data handler. Funkcionalitu je potrebné prispôsobiť konkrétnemu prípadu použitia.

Mestá

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Filtrovať obsah
Aktívny filter
Mesto Kraj Okres Rozloha Hustota
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
<div data-module="idsk-table" id="priklad-2">
    <div class="idsk-table__heading">
        <div>
            <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Mestá</h2>
            <p class="govuk-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</p>
        </div>
    </div>

  


<div data-module="idsk-table-filter" id="example-table-2-filter" class="idsk-table-filter ">
  <div class="idsk-table-filter__panel idsk-table-filter__inputs">
    <div class="idsk-table-filter__title govuk-heading-m">Filtrovať obsah</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť obsah filtra"
          data-close-text="Zbaliť obsah filtra"
          data-category-name=""
          aria-label="Rozbaliť obsah filtra"
          type="button">
    Rozbaliť obsah filtra
  </button>

    <form class="idsk-table-filter__content" action="#">
        <div class="govuk-grid-row idsk-table-filter__filter-inputs">
              <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="mesto">
          Mesto
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="mesto" name="mesto"
                 placeholder="Mesto"
                 aria-label="Mesto">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="kraj">
          Kraj
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="kraj" name="kraj"
                 placeholder="Kraj"
                 aria-label="Kraj">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="okres">
          Okres
        </label>
          <select tabindex="-1" class="govuk-select" id="okres" name="okres">
              <option  
                value="">Vybrať okres</option>
              <option  
                value="bratislava">Bratislava</option>
              <option  
                value="zilina">Žilina</option>
              <option  
                value="kosice">Košice</option>
          </select>
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="rozloha">
          Rozloha
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="rozloha" name="rozloha"
                 placeholder="Rozloha"
                 aria-label="Rozloha">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="hustota">
          Hustota
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="hustota" name="hustota"
                 placeholder="Hustota"
                 aria-label="Hustota">
      </div>
    </div>

        </div>
      <button type="submit" class="idsk-button submit-table-filter" disabled="disabled">
        Filtrovať (<span class="count">0</span>)
      </button>
    </form>
  </div>
  <div class="idsk-table-filter__panel idsk-table-filter__active-filters idsk-table-filter__active-filters__hide idsk-table-filter--expanded"
       data-remove-filter="Zrušiť filter"
       data-remove-all-filters="Zrušiť všetko">
    <div class="govuk-body idsk-table-filter__title">Aktívny filter</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť aktívny filter"
          data-close-text="Zbaliť aktívny filter"
          data-category-name=""
          aria-label="Zbaliť aktívny filter"
          type="button">
    Zbaliť aktívny filter
  </button>

    <div class="govuk-clearfix idsk-table-filter__content"></div>
  </div>
</div>


  <table class="idsk-table" >

<thead class="idsk-table__head">
      <tr class="idsk-table__row">
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Mesto
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Kraj
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Okres
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header idsk-table__header--numeric">
          <span class="th-span">
            Rozloha
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header idsk-table__header--numeric">
          <span class="th-span">
            Hustota
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
      </tr>
    </thead>
    <tbody class="idsk-table__body" style="max-height:364px">
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
    </tbody>
  </table>

    <div class="idsk-table__meta">
      <div class="idsk-button-group idsk-table__meta-buttons">

      </div>

        <div class="govuk-body idsk-table__meta-source">
          Zdroj: 
            <a class="govuk-link" href="https://sk.wikipedia.org/wiki/Zoznam_miest_na_Slovensku" target="_blank" title="sk.wikipedia.org">sk.wikipedia.org</a>
        </div>
    </div>
</div>

V prípade, že tabuľka obsahuje veľké množstvo údajov, zvážte koľko riadkov budete zobrazovať používateľom.

Mestá

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

Filtrovať obsah
Podľa miesta
Podľa veľkosti
Aktívny filter
Mesto Kraj Okres Rozloha Hustota
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
Bratislava Bratislavský Bratislava 367,66 1 199,34
Košice Košický Košice 237,05 1 004,59
Prešov Prešovský Prešov 70,43 1 247,85
Žilina Žilinský Žilina 80,03 1 004,45
Banská Bystrica Banskobystrický Banská Bystrica 103,38 751,78
Nitra Nitriansky Nitra 100,48 756,65
Trnava Trnavský Trnava 71,54 904,88
Trenčín Trenčiansky Trenčín 82 675,8
Martin Žilinský Martin 67,74 793,67
Poprad Prešovský Poprad 63,11 808,08
<div data-module="idsk-table" id="priklad-3">
    <div class="idsk-table__heading">
        <div>
            <h2 class="govuk-heading-l govuk-!-margin-bottom-4">Mestá</h2>
            <p class="govuk-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s.</p>
        </div>
        <div class="idsk-table__heading-extended">
          <div class="govuk-form-group">
            <div class="govuk-radios govuk-radios--inline">
                    <div class="govuk-radios__item">
                        <input class="govuk-radios__input" type="radio" name="radio-priklad-3" value="sk" checked="">
                        <label class="govuk-label govuk-radios__label" for="radio-priklad-3-1">Slovensko</label>
                    </div>
                    <div class="govuk-radios__item">
                        <input class="govuk-radios__input" type="radio" name="radio-priklad-3" value="cz" >
                        <label class="govuk-label govuk-radios__label" for="radio-priklad-3-2">Česko</label>
                    </div>
            </div>
          </div>
        </div>
    </div>

  


<div data-module="idsk-table-filter" id="example-table-3-filter" class="idsk-table-filter ">
  <div class="idsk-table-filter__panel idsk-table-filter__inputs">
    <div class="idsk-table-filter__title govuk-heading-m">Filtrovať obsah</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť obsah filtra"
          data-close-text="Zbaliť obsah filtra"
          data-category-name=""
          aria-label="Rozbaliť obsah filtra"
          type="button">
    Rozbaliť obsah filtra
  </button>

    <form class="idsk-table-filter__content" action="#">
          <div class="idsk-table-filter__category">
            <div class="idsk-table-filter__title govuk-heading-s">Podľa miesta <span class="count"></span></div>
              <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="-1"
          data-open-text="Rozbaliť sekciu filtra"
          data-close-text="Zbaliť sekciu filtra"
          data-category-name="Podľa miesta"
          aria-label="Rozbaliť sekciu filtra Podľa miesta"
          type="button">
    Rozbaliť sekciu filtra
  </button>

            <div class="idsk-table-filter__content">
              <div class="govuk-grid-row idsk-table-filter__filter-inputs">
                    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="mesto">
          Mesto
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="mesto" name="mesto"
                 placeholder="Mesto"
                 aria-label="Mesto">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="kraj">
          Kraj
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="kraj" name="kraj"
                 placeholder="Kraj"
                 aria-label="Kraj">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="okres">
          Okres
        </label>
          <select tabindex="-1" class="govuk-select" id="okres" name="okres">
              <option  
                value="">Vybrať okres</option>
              <option  
                value="bratislava">Bratislava</option>
              <option  
                value="zilina">Žilina</option>
              <option  
                value="kosice">Košice</option>
          </select>
      </div>
    </div>

              </div>
            </div>
          </div>
          <div class="idsk-table-filter__category">
            <div class="idsk-table-filter__title govuk-heading-s">Podľa veľkosti <span class="count"></span></div>
              <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="-1"
          data-open-text="Rozbaliť sekciu filtra"
          data-close-text="Zbaliť sekciu filtra"
          data-category-name="Podľa veľkosti"
          aria-label="Rozbaliť sekciu filtra Podľa veľkosti"
          type="button">
    Rozbaliť sekciu filtra
  </button>

            <div class="idsk-table-filter__content">
              <div class="govuk-grid-row idsk-table-filter__filter-inputs">
                    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="rozloha">
          Rozloha
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="rozloha" name="rozloha"
                 placeholder="Rozloha"
                 aria-label="Rozloha">
      </div>
    </div>
    <div class="govuk-grid-column-one-third-from-desktop">
      <div class="govuk-form-group">
        <label class="govuk-label" for="hustota">
          Hustota
        </label>
          <input tabindex="-1" class="govuk-input" type="text" id="hustota" name="hustota"
                 placeholder="Hustota"
                 aria-label="Hustota">
      </div>
    </div>

              </div>
            </div>
          </div>
      <button type="submit" class="idsk-button submit-table-filter" disabled="disabled">
        Filtrovať (<span class="count">0</span>)
      </button>
    </form>
  </div>
  <div class="idsk-table-filter__panel idsk-table-filter__active-filters idsk-table-filter__active-filters__hide idsk-table-filter--expanded"
       data-remove-filter="Zrušiť filter"
       data-remove-all-filters="Zrušiť všetko">
    <div class="govuk-body idsk-table-filter__title">Aktívny filter</div>
      <button class="govuk-body govuk-link idsk-filter-menu__toggle"
          tabindex="0"
          data-open-text="Rozbaliť aktívny filter"
          data-close-text="Zbaliť aktívny filter"
          data-category-name=""
          aria-label="Zbaliť aktívny filter"
          type="button">
    Zbaliť aktívny filter
  </button>

    <div class="govuk-clearfix idsk-table-filter__content"></div>
  </div>
</div>


  <table class="idsk-table" >

<thead class="idsk-table__head">
      <tr class="idsk-table__row">
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Mesto
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Kraj
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header">
          <span class="th-span">
            Okres
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header idsk-table__header--numeric">
          <span class="th-span">
            Rozloha
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
        <th scope="col" class="idsk-table__header idsk-table__header--numeric">
          <span class="th-span">
            Hustota
              <button class="arrowBtn"><span class="sr-only">Nezoradený stĺpec - použije vzostupné zoradenie.</span></button>
          </span>
        </th>
      </tr>
    </thead>
    <tbody class="idsk-table__body" style="max-height:910px">
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell">Bratislavský</td>
            <td class="idsk-table__cell">Bratislava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">367,66</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 199,34</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell">Košický</td>
            <td class="idsk-table__cell">Košice</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">237,05</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,59</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Prešov</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">70,43</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 247,85</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Žilina</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">80,03</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">1 004,45</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell">Banskobystrický</td>
            <td class="idsk-table__cell">Banská Bystrica</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">103,38</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">751,78</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell">Nitriansky</td>
            <td class="idsk-table__cell">Nitra</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">100,48</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">756,65</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell">Trnavský</td>
            <td class="idsk-table__cell">Trnava</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">71,54</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">904,88</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">	Trenčín</td>
            <td class="idsk-table__cell">Trenčiansky</td>
            <td class="idsk-table__cell">Trenčín</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">82</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">675,8</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell">Žilinský</td>
            <td class="idsk-table__cell">Martin</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">67,74</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">793,67</td>
          </tr>
          <tr class="idsk-table__row">
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell">Prešovský</td>
            <td class="idsk-table__cell">Poprad</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">63,11</td>
            <td class="idsk-table__cell idsk-table__cell--numeric">808,08</td>
          </tr>
    </tbody>
  </table>

    <div class="idsk-table__meta">
      <div class="idsk-button-group idsk-table__meta-buttons">

      </div>

        <div class="govuk-body idsk-table__meta-source">
          Zdroj: 
            <a class="govuk-link" href="https://sk.wikipedia.org/wiki/Zoznam_miest_na_Slovensku" target="_blank" title="sk.wikipedia.org">sk.wikipedia.org</a>
        </div>
    </div>
</div>

Pätička tabuľky

V pätičke tabuľky musí byť uvedený zdroj údajov. Zdroj uvádzajte vpravo dole pod tabuľkou. Naľavo pod tabuľkou môžete použiť tlačidlá pre exportu údajov alebo tlačidlo pre tlač.

Rozšírené príklady: