Tables
Enhance out-of-the-box Markdown tables with Bootstrap styling.
Hugo supports out-of-the box Markdown tables. Hinode enhances the basic tables with optional styling features provided by Bootstrap. The following paragraphs illustrate how to use basic tables, how to accent them, how to adjust the borders, and how to make the table more compact.
Hugo supports tables out-of-the-box with extended Markdown. Use an optional shortcode as wrapper to align the table cells.
Hugo supports tables out-of-the-box by using the |
and -
characters. Add {.table}
at the bottom of the block to apply the correct styling. You can mix the content with inline Markdown.
Italics | Bold | Code |
---|---|---|
italics | bold | code |
| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
{.table}
Hugo’s Markdown processor applies inline styles to align cells in a table, which is blocked by Hinode’s Content Security Policy. Use the table
shortcode to wrap your Markdown input instead. You can then align header and cell data to the left, center, or right of a column using the :
character. Pass additional class attributes between double quotes, e.g. "table-striped"
. See the next section for more options.
# | Item | Left aligned | Center aligned | Right aligned |
---|---|---|---|---|
1. | First item | some text | more text | even more text |
2. | Second item | some text | more text | even more text |
3. | Third item | some text | more text | even more text |
{{< table class="table-striped" >}}
| # | Item | Left aligned | Center aligned | Right aligned|
| -- | ----------- |:-------------|:--------------:| --------------:|
| 1. | First item | some text | more text | even more text |
| 2. | Second item | some text | more text | even more text |
| 3. | Third item | some text | more text | even more text |
{{< /table >}}
Add optional class attributes to style the table using Bootstrap.
Use .table-striped
to add zebra-striping to any table row.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-striped}
Use .table-striped-columns
to add zebra-striping to any table column.
# | Item | Description |
---|---|---|
1. | First item | This is the first row |
2. | Second item | This is the second row |
3. | Third item | This is the third row |
| # | Item | Description |
| -- | ----------- | ---------------------- |
| 1. | First item | This is the first row |
| 2. | Second item | This is the second row |
| 3. | Third item | This is the third row |
{.table .table-striped-columns}
Add .table-hover
to enable a hover state on the table rows.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-hover}
Add table-<theme>
to apply theme colors to your table. You can mix them with other classes, such as .table-striped
.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-success .table-striped}
Adjust the borders of a table to match your style preferences.
Add .table-bordered
for borders on all sides of the table and cells. Add an optional border-<theme>
class to apply theme colors to the table borders.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-bordered .border-primary}
Add .table-borderless
for a table without borders.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-borderless}
Add .table-sm
to make any table more compact by cutting all cell padding in half.
# | Item |
---|---|
1. | First item |
2. | Second item |
3. | Third item |
| # | Item |
| -- | ----------- |
| 1. | First item |
| 2. | Second item |
| 3. | Third item |
{.table .table-sm}
Embed the markdown table within the Table shortcode to make the table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens.
By default, the table
shortcode is responsive for all viewports.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< table >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
Use none
to disable this behavior.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< table none >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
Use {sm|md|lg|xl|xxl}
to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< table sm >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
{{< table md >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
{{< table lg >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
{{< table xl >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
{{< table xxl >}}
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|----|---------|---------|---------|---------|---------|---------|---------|---------|---------|
| 1. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 2. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
| 3. | cell | cel | cel | cel | cel | cel | cel | cel | cel |
{{< /table >}}
Include the module simple-datatables
to add advanced controls to your table. Features include in-line pagination, search, and sorting.
Enable the module in the frontmatter of your content page:
---
modules: ["simple-datatables"]
---
As an example, the following shortcode displays a responsive table that is searchable
, supports sorting
, and enables paging
.
# | Heading |
---|---|
1. | Item 1 |
2. | Item 2 |
3. | Item 3 |
4. | Item 4 |
5. | Item 5 |
6. | Item 6 |
7. | Item 7 |
8. | Item 8 |
9. | Item 9 |
10. | Item 10 |
11. | Item 11 |
12. | Item 12 |
13. | Item 13 |
14. | Item 14 |
15. | Item 15 |
16. | Item 16 |
17. | Item 17 |
18. | Item 18 |
19. | Item 19 |
20. | Item 20 |
21. | Item 21 |
22. | Item 22 |
23. | Item 23 |
24. | Item 24 |
25. | Item 25 |
26. | Item 26 |
27. | Item 27 |
28. | Item 28 |
29. | Item 29 |
30. | Item 30 |
{{< table sortable="true" paging="true" searchable="true" >}}
| # | Heading |
|-----|---------|
| 1. | Item 1 |
| 2. | Item 2 |
| 3. | Item 3 |
| 4. | Item 4 |
| 5. | Item 5 |
| 6. | Item 6 |
| 7. | Item 7 |
| 8. | Item 8 |
| 9. | Item 9 |
| 10. | Item 10 |
| 11. | Item 11 |
| 12. | Item 12 |
| 13. | Item 13 |
| 14. | Item 14 |
| 15. | Item 15 |
| 16. | Item 16 |
| 17. | Item 17 |
| 18. | Item 18 |
| 19. | Item 19 |
| 20. | Item 20 |
| 21. | Item 21 |
| 22. | Item 22 |
| 23. | Item 23 |
| 24. | Item 24 |
| 25. | Item 25 |
| 26. | Item 26 |
| 27. | Item 27 |
| 28. | Item 28 |
| 29. | Item 29 |
| 30. | Item 30 |
{{< /table >}}