# Hugo ultimate table shortcode

**URL:** <https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112>\
**Category:** tips & tricks\
**Created:** [October 12, 2021, 4:10pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112 "2021-10-12T16:10:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)\
**Post date:** [October 12, 2021, 4:10pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/1 "2021-10-12T16:10:09Z")

</div>

Hi, I know a lot has been written on the subject, however I didn’t find in this forum that shortcode.  
Features: HTML5 compatibility (no align-\*), markdown alignment, Bootstrap 4/5 compatibility, table caption support, [Schema.org](http://Schema.org) markup, WAI accessibility, custom CSS, custom Id, responsive (with CSS)

table.html

```auto
{{ $htmlTable := .Inner | markdownify }}
{{ $old := "<table>" }}
{{ $new := "" }}
{{ $title := .Get "title" }}
{{ $extraClass := .Get "class" }}
{{ $id := "" }}
  {{ with .Get "id" }}
    {{ $id = . }}
  {{ else }}
  {{ $id = delimit (shuffle (seq 1 9)) "" }}
  {{ end }}

{{ if $title }}
  {{ $new = printf "<table class=\"table %s\" id=\"%s\" itemscope itemtype=\"https://schema.org/Table\"><caption id=\"table-caption-%s\" itemprop=\"about\"><b>Tableau.</b> %s</caption>" $extraClass $id $id $title }}
{{ else }}
  {{ $new = printf "<table class=\"table %s\" id=\"%s\">" $extraClass $id}}
{{ end }}
{{ $htmlTable := replace $htmlTable $old $new }}
{{ $htmlTable := replaceRE "align=\"([a-z]+)\"" "style=\"text-align: $1\"" $htmlTable }}

<div class="data-table" role="region" tabindex="0" {{ if $title }}{{ printf "aria-labelledby=\"table-caption-%s\"" $id | safeHTMLAttr }}{{ end }}>
  {{ $htmlTable | safeHTML }}
</div>

<!-- Inspired by https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/ and improved by djibe-->

```

Call the shortcode

```auto
{{< table title="Optional title" class="optional CSS class declaration" id="optional- declaration-a-unique-one-will-be-generated" >}}
| Stade | DFG (CKD-EPI) | Définition |
|:-------:|:----------------------:|------------|
| 1 | &gt; 90 | MRC avec DFG normal ou augmenté |
| 2 | 60-89 | MRC avec DFG légèrement diminué |
| 3A | 45-59 | IRC modérée |
| 3B | 30-44 | IRC modérée |
| 4 | 15-29 | IRC sévère |
| 5 | < 15 | IRC terminale |
{{< /table >}}

```

Enjoy

---

<div class="post-metadata">

**Author:** ![rainGod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/raingod/32/17763_2.png) [@rainGod](https://discourse.gohugo.io/u/rainGod)\
**Post date:** [October 18, 2022, 2:05pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/2 "2022-10-18T14:05:37Z")

</div>

This is not working. Gives Error:

`Error: add site dependencies: load resources: loading templates: "/Users/me/Documents/fewsteps/hugo/qa/layouts/shortcodes/table.html:14:1": parse failed: template: shortcodes/table.html:14: unterminated quoted string`

---

<div class="post-metadata">

**Author:** ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)\
**Post date:** [October 18, 2022, 2:20pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/3 "2022-10-18T14:20:20Z")

</div>

Hi, it has been working for years now, everyday for my part.  
Make sure you copy-paste again properly.

---

<div class="post-metadata">

**Author:** ![rainGod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/raingod/32/17763_2.png) [@rainGod](https://discourse.gohugo.io/u/rainGod)\
**Post date:** [October 18, 2022, 5:16pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/4 "2022-10-18T17:16:21Z")

</div>

Copy and Paste it fully. But not working. Getting the same error. But the ref link code ([Style a Markdown Table With Bootstrap Classes in Hugo | zwbetz](https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/)) is working

Can you double check whether you posted all the code here.  
Thanks

---

<div class="post-metadata">

**Author:** ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)\
**Post date:** [October 18, 2022, 5:25pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/5 "2022-10-18T17:25:45Z")

</div>

[https://raw.githubusercontent.com/djibe/recommandations-medicales/master/layouts/shortcodes/table.html](https://raw.githubusercontent.com/djibe/recommandations-medicales/master/layouts/shortcodes/table.html)

Active code

---

<div class="post-metadata">

**Author:** ![rainGod](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/raingod/32/17763_2.png) [@rainGod](https://discourse.gohugo.io/u/rainGod)\
**Post date:** [October 18, 2022, 5:34pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/6 "2022-10-18T17:34:19Z")

</div>

created the file ‘mytable-one.html’ and copied the code form there and when tried to build getting the below error:

```auto
Error: add site dependencies: load resources: loading templates: "/Users/me/Documents/fewsteps/hugo/qa/layouts/shortcodes/mytable-one.html:15:1": parse failed: template: shortcodes/mytable-one.html:15: unterminated quoted string

```

---

<div class="post-metadata">

**Author:** ![frjo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/frjo/32/18626_2.png) [@frjo](https://discourse.gohugo.io/u/frjo)\
**Post date:** [October 19, 2022, 1:25pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/7 "2022-10-19T13:25:52Z")

</div>

Tested this shortcode on my own site and it works just as described. Neat solution, thanks @djibe!

---

<div class="post-metadata">

**Author:** ![djibe](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/djibe/32/11341_2.png) [@djibe](https://discourse.gohugo.io/u/djibe)\
**Post date:** [December 26, 2022, 6:19pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/8 "2022-12-26T18:19:53Z")

</div>

For extra CSS (responsive, Material design), you can check this example: [Data tables | Material UI 2](https://djibe.github.io/material/docs/4.6/material/data-tables/)

---

<div class="post-metadata">

**Author:** ![sumant28](https://avatars.discourse-cdn.com/v4/letter/s/a698b9/32.png) [@sumant28](https://discourse.gohugo.io/u/sumant28)\
**Post date:** [January 22, 2025, 10:44pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/9 "2025-01-22T22:44:20Z")

</div>

Hi I was wondering if it was possible to make a table row that covers multiple columns that ignores the column spacing of the table header with this snippet

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [January 22, 2025, 11:13pm UTC](https://discourse.gohugo.io/t/hugo-ultimate-table-shortcode/35112/10 "2025-01-22T23:13:55Z")

</div>

If you trust the content authors, just use HTML for complex tables.

[https://daringfireball.net/projects/markdown/syntax](https://daringfireball.net/projects/markdown/syntax)

> Markdown is not a replacement for HTML, or even close to it. Its syntax is very small, corresponding only to a very small subset of HTML tags. The idea is _not_ to create a syntax that makes it easier to insert HTML tags. In my opinion, HTML tags are already easy to insert. The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a _publishing_ format; Markdown is a _writing_ format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.
> 
> For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
> 
> _John Gruber_

You can create an HTML shortcode, use an inline shortcode, or just use the HTML content format.