Tables

Share via

Link copied to clipboard

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.

Italics	Bold	Code
italics	bold	`code`

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.

#	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

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.

#	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

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.

#	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

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.

#	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

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.

#	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

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

Docs

Basic tables

Default alignment

Aligned cells and headers

Accented tables

Striped rows

Striped columns

Hoverable rows

Colored tables

Table borders

Bordered tables

Tables without borders

Small tables

Responsive tables

Always responsive

Breakpoint specific