Tables¶
You may use the table syntax and directives provided by the parser of your choice, be it MyST or reST, however if you’re coming from MediaWiki or are just looking to create complex tables without regard for how readable they will be in the source, you might find the alternative syntax provided by the MCL Theme more convenient for you.
Directive¶
Syntax¶
The MCL table syntax uses special characters %, ^
and + to delimit rows, header and regular cells
respectively.
The delimiters must come before their content:
1:::{mcl-table}
2:caption: Sample Table
3
4%%%
5^^^
6Character
7^^^
8Herrscher
9
10%%%
11+++
12Kiana Kaslana
13+++
14Herrscher of Void
15
16%%%
17+++
18Mei Raiden
19+++
20Herrscher of Thunder
21:::
It should render like this:
Character | Herrscher |
|---|---|
Kiana Kaslana | Herrscher of Void |
Mei Raiden | Herrscher of Thunder |
Nested Tables¶
The content of cells can be multi-line and can contain directives, including nested directives and, of course, tables too.
For nested tables to work, however, parser would need to be able to tell cells and rows from different tables apart somehow. In MCL Table syntax it is done through the width of delimiters.
If you are using MyST, you ideally should match the width of delimiter with the amount of colons you prefixed the table directive with. But, actually the parser just sticks to whatever width of delimiter it saw first in the directive.
Here is an example of a nested table:
1::::{mcl-table} { style: "min-width: 100%" }
2%%%%
3^^^^
4Character
5^^^^
6Herrscher
7^^^^
8Inventorium
9
10%%%%
11++++
12Kiana Kaslana
13++++
14Herrscher of Void
15++++
16:::{mcl-table}
17%%%
18^^^
19Item
20^^^
21Amount
22
23%%%
24+++
25Half-Priced Salammy
26+++
2764
28:::
29
30%%%%
31++++
32Mei Raiden
33++++
34Herrscher of Thunder
35++++
36:::{mcl-table}
37%%%
38^^^
39Item
40^^^
41Amount
42
43%%%
44+++
45Half-Priced Salammy
46+++
4764
48:::
49::::
And that’s what it should render to:
Character | Herrscher | Inventorium | ||||
|---|---|---|---|---|---|---|
Kiana Kaslana | Herrscher of Void |
| ||||
Mei Raiden | Herrscher of Thunder |
|
Tip
Sometimes the tables with other tables in their cells
will struggle with sizing on their own. Consider adding
a min-width CSS prop or using a fixed table layout to
address those issues.
Of course, you shouldn’t really nest tables, nobody does that and you’re a bad snail if you do.
Attributes¶
You may attach any attributes to a table and it’s cells by just putting them after delimiter:
1:::{mcl-table} { style: "margin: .625rem auto !important; width: max(300px, 50vw); " }
2%%%
3^^^ { style: "color: navy;" }
4Character
5^^^ { style: "color: firebrick;" }
6Herrscher
7%%%
8+++ { rowspan: 3, valign: "top" }
9Kiana Kaslana
10+++
11Herrscher of Void
12%%%
13+++
14Herrscher of End
15%%%
16+++
17Herrscher of Finality
18%%%
19+++ { rowspan: 2, valign: "top" }
20Mei Raiden
21+++
22Herrscher of Thunder
23%%%
24+++
25Herrscher of Origin
26:::
The result is:
Character | Herrscher |
|---|---|
Kiana Kaslana | Herrscher of Void |
Herrscher of End | |
Herrscher of Finality | |
Mei Raiden | Herrscher of Thunder |
Herrscher of Origin |
Hint
The attributes used are the regular HTML table attributes written with Amazon Ion syntax.
To learn more, check out the MDN’s Table Element documentation and Amazon Ion Syntax Reference.