AsciiDoc-Tables

Standard Markdown features a syntax for defining tables. Yet, that can become somewhat awkward to use, in particular if cells have complex content. This is because each table row has to be written in one line of markdown, no matter how complex that happends to be.

MarkdownPlus supports a more flexible and elegant syntax which is largely inspired by AsciiDoc.

Example

|===		    // <- defines table start
| C11 | C12      // <- two cells, separated by '|'
| C13            // <- alternatively, one cell per line
|---		    // <- start of a new row
| C21 | x 	    // <- a cell containing '|' without blanks around it
| C22		    // <- third cell missing
|===		    // <- end of table

Result

Note: When defining multiple cells per line:
the pattern that splits cells is ␣| (i.e. the space before '|' is essential).
To use '|' within a cell, omit the preceeding space or mask it as \|.

Note:
There is no need to fill all cells, MarkdownPlus will straighten it out.

Table Caption

|===  "Table Caption"	// <- text here defines table caption
| C11 | C12 | C13
|===

Note:
Quotes around the caption are essential.

Styling and Attributes

Example

|===  {: background:yellow  aria-describedby=expl }  // <- Attribute Injection applied to table
| C11 | C12 | C13
|===

@@@ #expl .invisible 
Here is a detailed explanation&hellip;  // <- this text accessible to assistive technologies.
@@@

Result:

Note: assistive technologies like screen readers will present the otherwise invisible text with additional explanations (as provided in #expl).

Row Styling

|--- {: .row-class attrib=value }

→ This is basically Attribute Injection applied to a table row.

Header Row

Define header elements (th): # (hash character) in first cell of first row:

|=== 
|# H1 | H2 | H3
|---
| C11 | C12 | C13
|===

Colspan

Define 'colspans' (i.e. cells spreading over multiple columns) by the |>| pattern instead of empty cells:

|===
| C11 | C12 | C13 | C14
|---
|>|>| C21 | C24
|===

Advanced Example

Here we define column headers and use multiple lines per cell containing markdown:

|===  Table Caption
|# H1 | H2
|---
| C11 **bold** and *italic*
| Icon: :bluetooth:   // embedding an icon
|---
| ==marked==
					// everything up to the next line starting with '|' 
					//   belongs to this cell (unless shielded)
- one                 // markdown within cells
- two

DD:
: DT

| C22 BR \| \         // line-breaks and free standing '|'
	<p>lorem</p>      // code block
|===

<p>lorem</p>

Note:

• Column headers can be defined in the first row by a leading #
• You can use markdown within cells
• Cell definitions may take up multiple lines, the next cell is identified by the leading '|'