How to Customise Tables


#1

Hello.

I’m wondering if it’s possible to customise the table code generated by Hugo via CSS?

I’ve tried the path of going with shortcodes and while doing so, I’ve used .Inner but I couldn’t really achieve what I wanted and seems a bit like a hack.

Content:

{{< table >}}
| Disk 0 | Disk 1 | Disk 2 | Disk 3 |
|:------:|:------:|:------:|:-------:|
|   A1   |   A2   |   A3   | Ap(1-3) |
|   A4   |   A5   |   A6   | Ap(4-6) |
|   B1   |   B2   |   B3   | Bp(1-3) |
|   B4   |   B5   |   B6   | Bp(4-6) |
{{< table />}}

table.html:

<div class="table">
	  {{ .Inner }}
</div>

When I performed the above, the markdown table code was still present in the generated static web page and moreover, the above doesn’t give me granular control over the table.

Am I missing something or currently Hugo doesn’t support such a thing?


#2

I don’t know what “granular control” means in this context, but you might try {{ .Inner | markdownify }}. More info at https://gohugo.io/functions/markdownify/.


#3

If all you need is a class, you can add markup: mmark in frontmatter and use the following:

{.table}
| Disk 0 | Disk 1 | Disk 2 | Disk 3 |
|:------:|:------:|:------:|:-------:|
|   A1   |   A2   |   A3   | Ap(1-3) |
|   A4   |   A5   |   A6   | Ap(4-6) |
|   B1   |   B2   |   B3   | Bp(1-3) |
|   B4   |   B5   |   B6   | Bp(4-6) |

Need a div around it?

<div class="table">

| Disk 0 | Disk 1 | Disk 2 | Disk 3 |
|:------:|:------:|:------:|:-------:|
|   A1   |   A2   |   A3   | Ap(1-3) |
|   A4   |   A5   |   A6   | Ap(4-6) |
|   B1   |   B2   |   B3   | Bp(1-3) |
|   B4   |   B5   |   B6   | Bp(4-6) |

</div>

Should work.


#4

Another option is to build your table from a data file.
For an example, see How to create tables more simpler without markdown


#5

Sorry for the late reply, been busy.

With granular control over a table, I meant being able to style each and every table element: <table>, <tr>, <th>, etc. Is there a way to do so?

In order to solve the problem with my shortcode, I could do @maiki 's advise but I still don’t get granular control over the table.

@zwbetz raises a good point, however, I don’t want to store my tables in separate files when I can have them inline with the content in the first place. IMHO, it greatly messes my file/folder structure and reduces my efficiency as I have to move around different files when I could be working with just a single one.

Currently @brunoamaral 's solution of using mmark is a good temporary solution.

Since my theme makes use of Bootstrap CSS, initially, I want to make use of their table styling. Hence, as their documentation suggests, the below code should style a table with their styling:

<!-- Table -->
<table class="table">
  ...
</table>

That’s why I mentioned wrapping the table with the style table in my question. However, I made the mistake of wrapping it in a <div> instead of a <table>. Although, currently, when I wrap my tables in <table>s as I suggested above, the MD table inside doesn’t get rendered as @brunoamaral suggests. I’ve also tried wrapping them inside <div>s. Why is that?


#6

Just curious, why is mmark temporary? I am using the code below and it render a nice stripped table in bootstrap:

{.table .table-striped}
|            PATREON PLEDGE            | 1€   | 5€   | 7€   |
|:------------------------------------ |:----:|:----:|:----:|
| Early Access to Articles             | ✓    | ✓    | ✓    |
| Hints for CryptoNovel Puzzles        | ✓    | ✓    | ✓    |
| Access to Patreon Feed               | ✓    | ✓    | ✓    |
| Small Listing On The Site As A Patron|      | ✓    | ✓    |
| Suggestions of New Content           |      | ✓    | ✓    |
| Request of a Research Article        |      |      | ✓    |
| Listed As A Full Sponsor             |      |      | ✓    |


#7

Not a deal breaker but I don’t want to depend on mmark and have to add additional code to style my tables even though it’s just a small piece of code.

I want Hugo to be able to directly retrieve my custom styling. And if I want a different styling for a specific table, I want to define it as a Hugo shortcode since I find that’s more convenient.


#8

Since you guys are using Bootstrap to style your tables, this shortcode should work. Write your table in markdown, then pass the desired classes as an arg.

Usage:

{{< table "table table-striped" >}}
| Animal  | Sounds |
|---------|--------|
| Cat     | Meow   |
| Dog     | Woof   |
| Cricket | Chirp  |
{{</ table >}}

Definition:

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

Threw a little write-up on the blog too


#9

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)


#10

@ju52 This would “double up” the <table> tags. So if I’m understanding you correctly, the output would be:

<table class="tabclass">
<table>
...
</table>
</table>

#11

nope, Hugo does the trick
we get only one <table>

BUT

the inner part is NOT redered!
I delete this sample … to not confuse others!


#12

Thanks for your effort @zwbetz , that’s great to have!

Although, I still want to be able to style the default rendering of Hugo generated HTML tables without any additional stuff but I’ll settle for now.