Styling tables with Hugo

Markdown is a nice format to write it, but sometimes you need to add HTML classes directly to the output to make it look how you want. Here’s a way to do that using hugo shortcodes.

Create a table shortcode

Put this in /layouts/shortcodes/table.html:

1
2
3
4
5

{{ $htmlTable := .Inner | markdownify }} {{ $class := .Get 0 }} {{ $old := "
<table>
  " }} {{ $new := printf "<table class=\"%s\">" $class }} {{ $htmlTable :=
  replace $htmlTable $old $new }} {{ $htmlTable | safeHTML }}
</table>

Create a table

Like this:

1
2
3
4

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Item 1   | Item 2   | Item 3   |
| Item 1a  | Item 2a  | Item 3a  |

Which should render like so:

Wrap it in shortcodes

  

      

          
{{<table “table table-striped table-bordered”>}}
          

          

      
  
  

      

          
Item 1
          
Item 2
          
Item 3
      
      

          
Item 1a
          
Item 2a
          
Item 3a
      
      

          
{{</table>}}
          

          

      
  

Which should render:

References

1. https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/