# @zwbetz - load a table from an .md file

**URL:** <https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265>\
**Category:** support\
**Created:** [August 16, 2019, 8:07pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265 "2019-08-16T20:07:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 16, 2019, 8:07pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/1 "2019-08-16T20:07:27Z")

</div>

I want to thank zwbetz for the solution I found on his website - [https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/](https://zwbetz.com/style-a-markdown-table-with-bootstrap-classes-in-hugo/) - how to load a table from .md file! Works fine!  
Zachary, it would be so nice if you can explain your shortcode. I think you were trying to create a shortcode for any table on the site, and to assign individual styling to it with $class - did you?

```auto
"<table class=\"%s\">" $class }}

```

It is not very clear how you were going to use it.  
Thank you!

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [August 16, 2019, 8:35pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/2 "2019-08-16T20:35:06Z")

</div>

You also can do it directly in the .md file by adding the style information just before the table and adding mmark in the front matter

```auto
---
markup: "mmark"
---

```

For example

```auto
{.table .pure-table .table-striped .table-responsive}
Type | Types de cookies | A
-----|-------------------------|----
|Cookies strictement nécessaires | A
|Cookies fonctionnels | A
|Cookies de performance | A
|Cookies de marketing, tiers, à base de consentement | A

```

and (from memory) using `markdownify` in your template (not sure if this part is really needed)

```auto
{{ .Content | markdownify }}

```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [August 16, 2019, 9:25pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/3 "2019-08-16T21:25:31Z")

</div>

@vistad my solution was specific to how Bootstrap styles their tables, so if you’re using a different CSS library then the shortcode may have to be adapted.

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 17, 2019, 2:20pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/4 "2019-08-17T14:20:01Z")

</div>

Thanks for the info, but AFAIK mmark is an alternative markdown processor - while here in Hugo we use Blackfriday by default.

---

<div class="post-metadata">

**Author:** ![vistad](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/vistad/32/20509_2.png) [@vistad](https://discourse.gohugo.io/u/vistad)\
**Post date:** [August 17, 2019, 2:22pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/5 "2019-08-17T14:22:54Z")

</div>

> [@vistad](#):
>
> class="%s"\>" $class

Zachary, I definitely use Bootstrap. Could you please clarify this code?:

```html
class=\"%s\">" $class 

```

Thank you!

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [August 17, 2019, 2:33pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/6 "2019-08-17T14:33:59Z")

</div>

It’s helpful to look at the full code first:

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

```

The line you’re referring to is building the new `table` tag with bootstrap classes, which will replace the original tag.

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [August 17, 2019, 2:46pm UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/7 "2019-08-17T14:46:28Z")

</div>

Yep, it is alternative, but **included** in stock hugo, so I use this frontmatter option “mmark” when I need this table feature. Stock hugo.

May be the actual [testing about using Goldmark](https://github.com/gohugoio/hugo/issues/5963) will bring something usefull on this front

---

<div class="post-metadata">

**Author:** ![rrastik](https://avatars.discourse-cdn.com/v4/letter/r/f14d63/32.png) [@rrastik](https://discourse.gohugo.io/u/rrastik)\
**Post date:** [October 16, 2020, 8:12am UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/8 "2020-10-16T08:12:08Z")

</div>

Maybe help you this page:

[https://www.mybluelinux.com/how-create-bootstrap-tables-in-hugo/](https://www.mybluelinux.com/how-create-bootstrap-tables-in-hugo/)

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [October 16, 2020, 8:27am UTC](https://discourse.gohugo.io/t/zwbetz-load-a-table-from-an-md-file/20265/9 "2020-10-16T08:27:51Z")

</div>