There already seems to be some discussion, like here.
In markdown, we may draw a table like this,
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|
| A | B | C | D | E | F | G | H | I | J |
| K | L | M | N | O | P | Q | U | R | S |
and obtain this.
| 0 |
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
| A |
B |
C |
D |
E |
F |
G |
H |
I |
J |
| K |
L |
M |
N |
O |
P |
Q |
U |
R |
S |
The resulting html will look like bellow minus the caption tag.
<table>
<caption>Table 1. Caption the table.</caption>
<thead>
<tr>
<th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td>
</tr>
<tr>
<td>K</td><td>L</td><td>M</td><td>N</td><td>O</td><td>P</td><td>Q</td><td>U</td><td>R</td><td>S</td>
</tr>
</tbody>
</table>
Is there a way to achieve this with just markdown or something Hugo (I am new) specific? Maybe something like this because I have seen it elsewhere.
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
|---|---|---|---|---|---|---|---|---|---|
| A | B | C | D | E | F | G | H | I | J |
| K | L | M | N | O | P | Q | U | R | S |
[Table 1. Caption this table.]
Table 1. Caption the table.
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| A | B | C | D | E | F | G | H | I | J |
| K | L | M | N | O | P | Q | U | R | S |
Yes. Use a table render hook. See docs.
I looked at:
I am very new to Hugo and it is not obvious to me what would be the best way. Could you maybe give me an example of how I could get what I want?
Site configuration
See https://gohugo.io/content-management/markdown-attributes/#block-elements.
[markup.goldmark.parser.attribute]
block = true
Render hook
See https://gohugo.io/render-hooks/tables/#example.
layouts/_markup/render-table.html
<table
{{- range $k, $v := .Attributes }}
{{- if and $v (ne $k "caption") }}
{{- printf " %s=%q" $k $v | safeHTMLAttr }}
{{- end }}
{{- end }}>
{{- with .Attributes.caption }}
<caption>{{ . | $.Page.RenderString }}</caption>
{{- end }}
<thead>
{{- range .THead }}
<tr>
{{- range . }}
<th
{{- with .Alignment }}
{{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
{{- end -}}
>
{{- .Text -}}
</th>
{{- end }}
</tr>
{{- end }}
</thead>
<tbody>
{{- range .TBody }}
<tr>
{{- range . }}
<td
{{- with .Alignment }}
{{- printf " style=%q" (printf "text-align: %s" .) | safeHTMLAttr }}
{{- end -}}
>
{{- .Text -}}
</td>
{{- end }}
</tr>
{{- end }}
</tbody>
</table>
Markdown
See https://gohugo.io/content-management/markdown-attributes/#usage.
name|type|breed|age
:--|:--|:--|:--
Spot|dog|Collie|3
Rover|dog|Boxer|5
Felix|cat|Malicious|7
{caption="This is the table caption."}
Try it
git clone --single-branch -b hugo-forum-topic-55082 https://github.com/jmooring/hugo-testing hugo-forum-topic-55082
cd hugo-forum-topic-55082
hugo server
If you have many tables on a page you might want to consider auto-numbering them. See https://gohugo.io/render-hooks/tables/#ordinal.
Thank you so much!
I am familiar with the latex label and \ref{...} system, is that what you mean? Will it be okay if you showed an example again?
I’ve already given you eveything you need.
I understood about the table captions. I meant how to use ordinals.
If you have many tables on a page you might want to consider auto-numbering them. See Table render hooks.
Put that where though? Say I have this table,
name|type|breed|age
:--|:--|:--|:--
Spot|dog|Collie|3
Rover|dog|Boxer|5
Felix|cat|Malicious|7
{caption="This is the table caption."}
Okay now how do I assign an ordinal to it?
You need to spend some time reading and understanding the documentation.
In the render hook, replace this:
<caption>{{ . | $.Page.RenderString }}</caption>
With something like this:
<caption>
<strong>Table {{ add 1 $.Ordinal }}</strong><br>
{{ . | $.Page.RenderString }}
</caption>
The result will look something like this:
I am reading the documentation but it is still a bit new. Okay for example, I see this pattern a lot:
{{- with .Attributes.caption }}
<caption>{{ . | $.Page.RenderString }}</caption>
{{- end }}
Why not just:
<caption>{{ .Attributes.caption | .Page.RenderString }}</caption>
Because you will end up with an empty caption element if the author did not provide a caption.
