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 …

[image] can: 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? I don’t know what “granular cont…

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) | | …

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 …

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 …

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…

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 | Chi…

@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>

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.

[image] can: 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. At some point, additional code is needed to style your tables, no? Another way to do this is using a front matter param and JS. Y…

How to Customise Tables

zwbetz December 4, 2018, 4:03pm 4

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

Topic		Replies	Views
Proposal to add a new shortcode "table" to Hugo	8	4760	October 12, 2021
Table in markdown	13	23534	October 19, 2020
@zwbetz - load a table from an .md file support	7	777	October 16, 2020
Hugo ultimate table shortcode tips & tricks	9	3299	January 22, 2025
Customizing HTML output of blackfriday feature	7	3698	October 29, 2015

How to Customise Tables

Related topics