Skip to content

Tables

SevenMark uses {{{#table}}} syntax for tables, with rows and cells structured using nested [[]] brackets.

Basic Table

sevenmark
{{{#table
[[[[Cell 1,1]] [[Cell 1,2]]]]
[[[[Cell 2,1]] [[Cell 2,2]]]]
}}}

The structure is:

  • {{{#table}}}: table container
  • [[ ... ]]: one row
  • [[Cell]]: one cell inside that row

Rows and cells are structural double-bracket segments. The parser matches nested [[...]], [...], and {{{...}}} regions while it searches for the segment close, so cells can contain links, macros, raw blocks, and other SevenMark content without breaking the table.

Whitespace immediately around row and cell bodies is trimmed before the body is parsed as nested SevenMark content. Whitespace after a closing structural segment can be consumed as table layout whitespace.

Header Rows (#head)

Add the #head flag on a row to render it inside <thead> with <th> cells.

sevenmark
{{{#table
[[#head [[Product]] [[Price]] [[Stock]]]]
[[[[Laptop]] [[$1,200]] [[5 units]]]]
[[[[Mouse]] [[$30]] [[20 units]]]]
}}}

Rows without #head render inside <tbody> with normal <td> cells.

Table Caption, Sorting, and Alignment

Use #caption on the table element to render a <caption>, #sortable to opt into sortable-table behavior on the frontend, #nopad to remove padding from every cell, and #wrapper-align to position the table wrapper.

sevenmark
{{{#table #caption="Inventory" #wrapper-align="right" #sortable
[[#head [[Product]] [[Price]] [[Stock]]]]
[[[[Laptop]] [[$1,200]] [[5 units]]]]
[[[[Mouse]] [[$30]] [[20 units]]]]
}}}

#wrapper-align accepts left, center, and right. It affects the outer table wrapper rather than the <table> element itself, so authored table styles can stay on #style while layout is handled separately.

Use #wrapper-width to set a fixed width on the wrapper div, and #wrapper-style / #wrapper-dark-style for arbitrary CSS on the wrapper:

sevenmark
{{{#table #wrapper-align="right" #wrapper-width="400px" #wrapper-style="margin:2rem 0"
[[#head [[Product]] [[Price]]]]
[[[[Laptop]] [[$1,200]]]]
}}}

Cell Merging

Horizontal Merge (#x)

sevenmark
{{{#table
[[[[#x="2" Merged cell spanning 2 columns]] [[Normal cell]]]]
[[[[Cell 1]] [[Cell 2]] [[Cell 3]]]]
}}}

Vertical Merge (#y)

sevenmark
{{{#table
[[[[#y="2" Merged cell spanning 2 rows]] [[Cell 1,2]]]]
[[[[ ]] [[Cell 2,2]]]]
}}}

Styling

Tables, rows, and cells support the common style parameters such as #style, #class, #color, #bgcolor, and the #dark-* overrides.

Table-level Styling

sevenmark
{{{#table #style="width:100%; border-collapse:collapse" #dark-bgcolor="#111"
[[#head [[Name]] [[Status]]]]
[[[[Widget A]] [[Active]]]]
}}}

Cell Styling

sevenmark
{{{#table
[[#head [[Name]] [[Status]]]]
[[[[#color="blue" Laptop]] [[#bgcolor="lightyellow" Ready]]]]
}}}

Conditional Rows and Cells

Tables support conditional rendering at both row and cell level using {{{#if}}}.

Conditional Rows

sevenmark
{{{#define #showDetails="true"}}}

{{{#table
[[#head [[Product]] [[Price]]]]
[[[[Widget A]] [[$10]]]]
{{{#if [var(showDetails)] == "true" :: [[[[Details]] [[Size: Medium]]]] }}}
[[[[Widget B]] [[$20]]]]
}}}

Row-level conditionals must appear where a row would appear. Their content must be one or more row segments:

sevenmark
{{{#if [var(show)] == "true" :: [[[[A]] [[B]]]] [[[[C]] [[D]]]] }}}

Conditional Cells

sevenmark
{{{#define #showStock="true"}}}

{{{#table
[[#head [[Product]] [[Price]] {{{#if [var(showStock)] == "true" :: [[Stock]] }}}]]
[[[[Widget A]] [[$10]] {{{#if [var(showStock)] == "true" :: [[5 units]] }}}]]
[[[[Widget B]] [[$20]] {{{#if [var(showStock)] == "true" :: [[10 units]] }}}]]
}}}

Cell-level conditionals must appear inside a row. Their content must be one or more cell segments:

sevenmark
[[[[Name]] {{{#if [var(showExtra)] == "true" :: [[Extra]] [[More]] }}}]]

Nested Markup

Table cells can contain other SevenMark elements:

sevenmark
{{{#table #caption="Feature matrix"
[[#head [[Feature]] [[Description]]]]
[[[[**Bold**]] [[*Italic* text]]]]
[[[[Code]] [[```
inline_code()
```
]]]]
[[[[Anchor]] [[[anchor(api-section)]]]]]
[[[[Media]] [[[[file:image.png | Image]]]]]]
}}}

Note: use target-first double brackets such as [[file:image.png | Image]] and [[https://example.com | Link]] inside cells, not @media.

Namumark Pipe Tables

SevenMark also accepts line-start namumark-style pipe tables. Each row starts with ||, and cells are separated by ||.

sevenmark
|| Name || Status || Link ||
|| SevenMark || Active || [[https://example.com | Site]] ||

Adjacent opening delimiters create colspan:

sevenmark
|| Wide cell |||| Normal cell ||

The namumark pipe-table scanner ignores || delimiters inside balanced {{{...}}}, [[...]], and [...] regions, and \|| is treated as literal cell text.

Namumark table parameter blocks map onto the same SevenMark table, row, and cell AST used by {{{#table}}}.

sevenmark
||<table align=center width=600px><thead> Name || Status ||
||<bgcolor=#eef> Parser || Ready ||
||<-2> Spanning two columns ||

Supported namumark table parameter forms include:

  • <-N>: cell colspan (#x)
  • <|N>: cell rowspan (#y)
  • <^|N> and <v|N>: row span plus top or bottom vertical alignment
  • <:>, <(>, <)>: cell alignment center, left, right
  • <thead>: header row
  • <table align=... width=... bgcolor=... color=... bordercolor=... class=... style=...> and compact forms such as <tablewidth=...>: table-level parameters
  • <row bgcolor=... color=... class=... style=...> and compact forms such as <rowbgcolor=...>: row-level parameters
  • <col bgcolor=... color=... class=... style=...> and compact forms such as <colbgcolor=...>: column defaults that are applied to cells in that column
  • Other key=value entries become cell-level parameters, including width, height, bgcolor, color, and bordercolor
  • nopad, keepall, and sortable become cell-level flags
  • Table-level #nopad removes padding from every rendered cell in that table
  • rowkeepall becomes a row-level flag, and colkeepall becomes a column-level keepall flag

Namumark light/dark color pairs such as <bgcolor=#fff,#000> map to #bgcolor plus #dark-bgcolor; the same split is applied to color and bordercolor at table, row, column, and cell scope.