Table - Tabuľka
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 "govuk/components/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"
}
]
]
}) }}Tabuľka table with head
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 "govuk/components/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"
}
]
]
}) }}Tabuľka table with head and caption
Otvoriť príklad na novej záložke: tabuľka table with head and caption
Code
Markup
<table class="govuk-table">
<caption class="govuk-table__caption govuk-table__caption--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 "govuk/components/table/macro.njk" import govukTable %}
{{ govukTable({
caption: "Caption 1: Months and rates",
captionClasses: "govuk-table__caption--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"
}
]
]
}) }}Tabuľka with small text modifier for tables with a lot of data
Otvoriť príklad na novej záložke: tabuľka with small text modifier for tables with a lot of data
Code
Markup
<table class="govuk-table govuk-table--small-text-until-tablet">
<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 "govuk/components/table/macro.njk" import govukTable %}
{{ govukTable({
classes: "govuk-table--small-text-until-tablet",
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"
}
]
]
}) }}