A standard table element rendered using standard markdown table syntax, with Hugo extensions for captions, header settings, and column alignment.
Features
- Supports standard markdown table syntax.
- Supports adding captions, and alignment of captions to left, center, or right.
- Align column text to left, center, right.
- Supports table header to either be first row, column, both or none.
Syntax
Basic markdown table syntax:
| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1 | Cell 2 |Provide additional attributes to tables using curly braces after table:
| Header 1 | Header 2 |
| -------- | -------- |
| Cell 1 | Cell 2 |
{caption="A Table Caption" header="row"}Align text in columns using : in header row:
| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Cell 1 | Cell 2 | Cell 3 |Examples
Example 1: Simple Table
markdown
| Name | Role |
| ------- | -------- |
| Kiki | Witch |
| Chihiro | Student |Output:
| Name | Role |
|---|---|
| Kiki | Witch |
| Chihiro | Student |
Example 2: Table with Caption
markdown
| Movie | Year |
| ------------- | ---- |
| Totoro | 1988 |
| Spirited Away | 2001 |
{caption="Studio Ghibli Films"}Output:
| Movie | Year |
|---|---|
| Totoro | 1988 |
| Spirited Away | 2001 |
Caption Alignment
Left Aligned Caption (Default)
markdown
| Movie | Year |
| ------------- | ---- |
| Totoro | 1988 |
| Spirited Away | 2001 |
{caption="Studio Ghibli Films" captionalign="left"}Output:
| Movie | Year |
|---|---|
| Totoro | 1988 |
| Spirited Away | 2001 |
Center Aligned Caption
markdown
| Movie | Year |
| ------------- | ---- |
| Totoro | 1988 |
| Spirited Away | 2001 |
{caption="Studio Ghibli Films" captionalign="center"}Output:
| Movie | Year |
|---|---|
| Totoro | 1988 |
| Spirited Away | 2001 |
Right Aligned Caption
markdown
| Movie | Year |
| ------------- | ---- |
| Totoro | 1988 |
| Spirited Away | 2001 |
{caption="Studio Ghibli Films" captionalign="right"}Output:
| Movie | Year |
|---|---|
| Totoro | 1988 |
| Spirited Away | 2001 |
Example 3: Table with Different Heading Settings
First Row as Header (Default)
markdown
| Name | Role |
| ------- | -------- |
| Kiki | Witch |
| Chihiro | Student |
{header="column"}Output:
| Character | Kiki | Chihiro |
|---|---|---|
| Movie | Kiki’s Delivery Service | Spirited Away |
| Role | Witch | Student |
First Column as Header
markdown
| Character | Kiki | Chihiro |
| --------- | ------ | ------- |
| Movie | Kiki's Delivery Service | Spirited Away |
| Role | Witch | Student |
{header="column"}Output:
| Character | Kiki | Chihiro |
|---|---|---|
| Movie | Kiki’s Delivery Service | Spirited Away |
| Role | Witch | Student |
Both First Row and Column as Headers
markdown
| Character | Kiki | Chihiro |
| --------- | ------ | ------- |
| Movie | Kiki's Delivery Service | Spirited Away |
| Role | Witch | Student |
{header="both"}Output:
| Character | Kiki | Chihiro |
|---|---|---|
| Movie | Kiki’s Delivery Service | Spirited Away |
| Role | Witch | Student |
No Header Row
markdown
| Name | Role |
| ------- | -------- |
| Kiki | Witch |
| Chihiro | Student |
{header="none"}Output:
| Name | Role |
| Kiki | Witch |
| Chihiro | Student |
Example 4: Table with Column Text Alignment
markdown
| Name | Role |
| :-----: | :------: |
| Kiki | Witch |
| Chihiro | Student |Output:
| Name | Role |
|---|---|
| Kiki | Witch |
| Chihiro | Student |
Mixed Alignment
markdown
| Name | Role | Year |
| :------ | :------: | -----: |
| Kiki | Witch | 1989 |
| Chihiro | Student | 2001 |Output:
| Name | Role | Year |
|---|---|---|
| Kiki | Witch | 1989 |
| Chihiro | Student | 2001 |
Example 5: Full Sized Table
Wrap a table in full partial to make table width extend full width of the page.
markdown
{{< full >}}
| Name | Role | Year |
| :------ | :------: | -----: |
| Kiki | Witch | 1989 |
| Chihiro | Student | 2001 |
{{< /full >}}Output:
| Name | Role | Year |
|---|---|---|
| Kiki | Witch | 1989 |
| Chihiro | Student | 2001 |
Example 6: Really wide table
If you have a table with many columns, it will automatically be horizontally scrollable :
markdown
| Name | Role | Year | Movie | Director | Genre | Rating | Country | Language | Awards | Box Office |
| :------ | :-------: | ----:| :---------------------: | :-------------: | :-------: | :----: | :-----: | :------: | :-----: | :--------: |
| Kiki | Witch | 1989 | Kiki's Delivery Service | Hayao Miyazaki | Fantasy | 7.9 | Japan | Japanese | None | $41M |
| Chihiro | Student | 2001 | Spirited Away | Hayao Miyazaki | Fantasy | 8.6 | Japan | Japanese | Oscar | $355M |
| Sophie | Hat Maker | 2004 | Howl's Moving Castle | Hayao Miyazaki | Fantasy | 8.2 | Japan | Japanese | None | $236M |
| Pazu | Engineer | 1986 | Castle in the Sky | Hayao Miyazaki | Adventure | 8.0 | Japan | Japanese | None | $15M |Output:
| Name | Role | Year | Movie | Director | Genre | Rating | Country | Language | Awards | Box Office |
|---|---|---|---|---|---|---|---|---|---|---|
| Kiki | Witch | 1989 | Kiki’s Delivery Service | Hayao Miyazaki | Fantasy | 7.9 | Japan | Japanese | None | $41M |
| Chihiro | Student | 2001 | Spirited Away | Hayao Miyazaki | Fantasy | 8.6 | Japan | Japanese | Oscar | $355M |
| Sophie | Hat Maker | 2004 | Howl’s Moving Castle | Hayao Miyazaki | Fantasy | 8.2 | Japan | Japanese | None | $236M |
| Pazu | Engineer | 1986 | Castle in the Sky | Hayao Miyazaki | Adventure | 8.0 | Japan | Japanese | None | $15M |
Example 7: Wide Sized Table
Or instead wrap such a really wide table in wide partial to make table width extend full width of the viewport.
markdown
{{< wide >}}
| Name | Role | Year | Movie | Director | Genre | Rating | Country | Language | Awards | Box Office |
| :------ | :-------: | ----:| :---------------------: | :-------------: | :-------: | :----: | :-----: | :------: | :-----: | :--------: |
| Kiki | Witch | 1989 | Kiki's Delivery Service | Hayao Miyazaki | Fantasy | 7.9 | Japan | Japanese | None | $41M |
| Chihiro | Student | 2001 | Spirited Away | Hayao Miyazaki | Fantasy | 8.6 | Japan | Japanese | Oscar | $355M |
| Sophie | Hat Maker | 2004 | Howl's Moving Castle | Hayao Miyazaki | Fantasy | 8.2 | Japan | Japanese | None | $236M |
| Pazu | Engineer | 1986 | Castle in the Sky | Hayao Miyazaki | Adventure | 8.0 | Japan | Japanese | None | $15M |
{{< /wide >}}Output:
| Name | Role | Year | Movie | Director | Genre | Rating | Country | Language | Awards | Box Office |
|---|---|---|---|---|---|---|---|---|---|---|
| Kiki | Witch | 1989 | Kiki’s Delivery Service | Hayao Miyazaki | Fantasy | 7.9 | Japan | Japanese | None | $41M |
| Chihiro | Student | 2001 | Spirited Away | Hayao Miyazaki | Fantasy | 8.6 | Japan | Japanese | Oscar | $355M |
| Sophie | Hat Maker | 2004 | Howl’s Moving Castle | Hayao Miyazaki | Fantasy | 8.2 | Japan | Japanese | None | $236M |
| Pazu | Engineer | 1986 | Castle in the Sky | Hayao Miyazaki | Adventure | 8.0 | Japan | Japanese | None | $15M |