Tables

Share via

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.

Basic tables

Hugo supports tables out-of-the-box with extended Markdown. Use an optional shortcode as wrapper to align the table cells.

Default alignment

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.

ItalicsBoldCode
italicsboldcode
markdown
| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |
{.table}

Aligned cells and headers

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.

#ItemLeft alignedCenter alignedRight aligned
1.First itemsome textmore texteven more text
2.Second itemsome textmore texteven more text
3.Third itemsome textmore texteven more text
markdown
{{< table "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 >}}

Accented tables

Add optional class attributes to style the table using Bootstrap.

Striped rows

Use .table-striped to add zebra-striping to any table row.

#Item
1.First item
2.Second item
3.Third item
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-striped}

Striped columns

Use .table-striped-columns to add zebra-striping to any table column.

#ItemDescription
1.First itemThis is the first row
2.Second itemThis is the second row
3.Third itemThis is the third row
markdown
| #  | 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}

Hoverable rows

Add .table-hover to enable a hover state on the table rows.

#Item
1.First item
2.Second item
3.Third item
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-hover}

Colored tables

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
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-success .table-striped}

Table borders

Adjust the borders of a table to match your style preferences.

Bordered tables

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
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-bordered .border-primary}

Tables without borders

Add .table-borderless for a table without borders.

#Item
1.First item
2.Second item
3.Third item
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-borderless}

Small tables

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
markdown
| #  | Item        |
| -- | ----------- |
| 1. | First item  |
| 2. | Second item |
| 3. | Third item  |
{.table .table-sm}

Responsive tables

Added in v0.8.0

Embed the markdown table within the table shortcode to make the table responsive. Responsive tables scroll horizontally to improve the layout on smaller screens.

Always responsive

By default, the table shortcode is responsive for all viewports.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
markdown
{{< 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 .table-responsive-none to disable this behavior.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
markdown
{{< table table-responsive-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 >}}

Breakpoint specific

Use .table-responsive{-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.

#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
#HeadingHeadingHeadingHeadingHeadingHeadingHeadingHeadingHeading
1.cellcelcelcelcelcelcelcelcel
2.cellcelcelcelcelcelcelcelcel
3.cellcelcelcelcelcelcelcelcel
markdown
{{< table table-responsive-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 table-responsive-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 table-responsive-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 table-responsive-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 table-responsive-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 >}}
Last updated: June 29, 2023 • Rename base docs folder from 0.9 to latest (8a90ed7)
On this page