Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Table

Table

Code

Markup

<table class="govuk-table">
  <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">January</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">February</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">March</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
        </tr>
  </tbody>
</table>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "£85",
        "format": "numeric"
      },
      {
        "text": "£95",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "£75",
        "format": "numeric"
      },
      {
        "text": "£55",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "£165",
        "format": "numeric"
      },
      {
        "text": "£125",
        "format": "numeric"
      }
    ]
  ]
}) }}

Table table with head

(open in a new window)
Code

Markup

<table class="govuk-table">
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">Month you apply</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">January</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">February</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
        </tr>
        <tr class="govuk-table__row">
          <td class="govuk-table__cell">March</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
        </tr>
  </tbody>
</table>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "head": [
    {
      "text": "Month you apply"
    },
    {
      "text": "Rate for bicycles",
      "format": "numeric"
    },
    {
      "text": "Rate for vehicles",
      "format": "numeric"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "£85",
        "format": "numeric"
      },
      {
        "text": "£95",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "£75",
        "format": "numeric"
      },
      {
        "text": "£55",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "£165",
        "format": "numeric"
      },
      {
        "text": "£125",
        "format": "numeric"
      }
    ]
  ]
}) }}

Table table with head and caption

(open in a new window)
Code

Markup

<table class="govuk-table">
  <caption class="govuk-table__caption govuk-heading-m">Caption 1: Months and rates</caption>
  <thead class="govuk-table__head">
    <tr class="govuk-table__row">
      <th scope="col" class="govuk-table__header">Month you apply</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for bicycles</th>
      <th scope="col" class="govuk-table__header govuk-table__header--numeric">Rate for vehicles</th>
    </tr>
  </thead>
  <tbody class="govuk-table__body">
        <tr class="govuk-table__row">
          <th scope="row" class="govuk-table__header">January</th>
          <td class="govuk-table__cell govuk-table__cell--numeric">£85</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£95</td>
        </tr>
        <tr class="govuk-table__row">
          <th scope="row" class="govuk-table__header">February</th>
          <td class="govuk-table__cell govuk-table__cell--numeric">£75</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£55</td>
        </tr>
        <tr class="govuk-table__row">
          <th scope="row" class="govuk-table__header">March</th>
          <td class="govuk-table__cell govuk-table__cell--numeric">£165</td>
          <td class="govuk-table__cell govuk-table__cell--numeric">£125</td>
        </tr>
  </tbody>
</table>

Macro

{% from "table/macro.njk" import govukTable %}

{{ govukTable({
  "caption": "Caption 1: Months and rates",
  "captionClasses": "govuk-heading-m",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Month you apply"
    },
    {
      "text": "Rate for bicycles",
      "format": "numeric"
    },
    {
      "text": "Rate for vehicles",
      "format": "numeric"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "£85",
        "format": "numeric"
      },
      {
        "text": "£95",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "£75",
        "format": "numeric"
      },
      {
        "text": "£55",
        "format": "numeric"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "£165",
        "format": "numeric"
      },
      {
        "text": "£125",
        "format": "numeric"
      }
    ]
  ]
}) }}