# Setting the class of markdown tables

**URL:** <https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781>\
**Category:** support\
**Created:** [December 10, 2016, 4:20pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781 "2016-12-10T16:20:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bshankar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bshankar/32/2356_2.png) [@bshankar](https://discourse.gohugo.io/u/bshankar)\
**Post date:** [December 10, 2016, 4:20pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/1 "2016-12-10T16:20:09Z")

</div>

I use a theme that uses pure css. When I create a markdown table, it generates html code that looks like this

```
<table>
...
</table>

```

But what I want is

```
<table class="pure-table">
...
</table>

```

to apply the css styles existing in the theme. How can I do this in hugo?

---

<div class="post-metadata">

**Author:** ![mpaluchowski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mpaluchowski/32/3459_2.png) [@mpaluchowski](https://discourse.gohugo.io/u/mpaluchowski)\
**Post date:** [December 10, 2016, 4:43pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/2 "2016-12-10T16:43:16Z")

</div>

That’s probably impossible with Markdown. Hugo uses [Blackfriday](https://github.com/russross/blackfriday) for parsing Markdown and that [doesn’t seem to support any additional attributes for Tables](https://github.com/russross/blackfriday#extensions).

You’ll have to use plain HTML (which you can freely mix with Markdown).

---

<div class="post-metadata">

**Author:** ![moorereason](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/moorereason/32/592_2.png) [@moorereason](https://discourse.gohugo.io/u/moorereason)\
**Post date:** [December 10, 2016, 5:43pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/3 "2016-12-10T17:43:46Z")

</div>

Inline attributes are not part of the Markdown “standard,”, but you can use [mmark](https://github.com/miekg/mmark) with Hugo. Just use a `mmark` file extension for your content. See the **Inline Attribute Lists** section of the [mmark Syntax page](https://github.com/miekg/mmark/wiki/Syntax) or [this blog post](https://miek.nl/2016/March/01/inline-attribute-lists/) on how to use inline attributes.

---

<div class="post-metadata">

**Author:** ![bshankar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bshankar/32/2356_2.png) [@bshankar](https://discourse.gohugo.io/u/bshankar)\
**Post date:** [December 10, 2016, 6:40pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/4 "2016-12-10T18:40:14Z")

</div>

thanks !  
does exactly what I was looking for without resorting to inline html.

---

<div class="post-metadata">

**Author:** ![hnarayanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/hnarayanan/32/4547_2.png) [@hnarayanan](https://discourse.gohugo.io/u/hnarayanan)\
**Post date:** [December 10, 2016, 9:29pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/5 "2016-12-10T21:29:59Z")

</div>

Cool, I learnt something today! I too use pure CSS and I too have been using inline HTML for things like this. Need to explore mmark.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [December 10, 2016, 11:31pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/6 "2016-12-10T23:31:08Z")

</div>

Note that if you do not want to rename your markdown files to \*.mmark you can set `Markdown = mmark` in frontmatter.

---

<div class="post-metadata">

**Author:** ![Vam](https://avatars.discourse-cdn.com/v4/letter/v/43a26b/32.png) [@Vam](https://discourse.gohugo.io/u/Vam)\
**Post date:** [March 15, 2017, 8:46am UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/7 "2017-03-15T08:46:36Z")

</div>

hi bep,

I just tried set Markdown = mmark in frontmatter. But seems it dont work. Can you explain more?

Thanks!

Vam

---

<div class="post-metadata">

**Author:** ![Mikhail](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/mikhail/32/1138_2.png) [@Mikhail](https://discourse.gohugo.io/u/Mikhail)\
**Post date:** [March 15, 2017, 9:13am UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/8 "2017-03-15T09:13:56Z")

</div>

See [Optional variables](https://gohugo.io/content/front-matter/#optional-variables). But support for the mmark can be [disabled soon](https://github.com/spf13/hugo/issues/1970).

---

<div class="post-metadata">

**Author:** ![Vam](https://avatars.discourse-cdn.com/v4/letter/v/43a26b/32.png) [@Vam](https://discourse.gohugo.io/u/Vam)\
**Post date:** [March 15, 2017, 9:19am UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/9 "2017-03-15T09:19:13Z")

</div>

Yeah it works. Thank you very much Mikhail!

---

<div class="post-metadata">

**Author:** ![anthonyfok](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anthonyfok/32/106_2.png) [@anthonyfok](https://discourse.gohugo.io/u/anthonyfok)\
**Post date:** [June 5, 2018, 3:35pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/10 "2018-06-05T15:35:20Z")

</div>

Thank you all for the answers! I needed this feature too, and was glad to find mmark supporting setting the class (and other attributes) in its implementation of Markdown tables.

Here is an example summarizing the answers above:

```markdown
---
markup: "mmark"
---

{.table .pure-table .table-striped .table-responsive}
Name | Age
--------|-----:
Bob | 27
Alice | 23

```

See:

- [https://github.com/miekg/mmark/wiki/Syntax#inline-attribute-lists](https://github.com/miekg/mmark/wiki/Syntax#inline-attribute-lists)
- [https://github.com/miekg/mmark/wiki/Syntax#tables](https://github.com/miekg/mmark/wiki/Syntax#tables)

---

<div class="post-metadata">

**Author:** ![anthonyfok](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/anthonyfok/32/106_2.png) [@anthonyfok](https://discourse.gohugo.io/u/anthonyfok)\
**Post date:** [June 7, 2018, 2:14pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/11 "2018-06-07T14:14:31Z")

</div>

> [@Mikhail](#):
>
> See [Optional variables](https://gohugo.io/content/front-matter/#optional-variables). But support for the mmark can be [disabled soon](https://github.com/spf13/hugo/issues/1970).

@Mikhail Thank you so much for your reminder! I totally forgot about [helpers: Mmark support incomplete, e.g. missing EXTENSION\_ABBREVIATION · Issue #1970 · gohugoio/hugo · GitHub](https://github.com/gohugoio/hugo/issues/1970)! Rest assured, mmark support in Hugo isn’t going away, but I really need to get that issue (helpers: Mmark support incomplete, e.g. missing EXTENSION\_ABBREVIATION) fixed soon. Can’t believe it has been over 2 years ago! Time flies!

---

<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:** [June 9, 2023, 3:32pm UTC](https://discourse.gohugo.io/t/setting-the-class-of-markdown-tables/4781/12 "2023-06-09T15:32:56Z")

</div>

3 posts were split to a new topic: [How to add CSS “class” attribute to markdown table](https://discourse.gohugo.io/t/how-to-add-css-class-attribute-to-markdown-table/44754)