Tables
Tables lay out multiple lines of detailed data in an organized way. In Markdown, Tables are used to display cells of inline content. This often means that table structue is kept simple.
If a Table with complex structure is needed, it can be created as an HTML fragment in a
Block HTML element.
Syntax
Markdown Tables consist of 3 things:
A header row, which contains header cell content separated by | characters.
An alignment row, that indicates the alignment of the body cells' text. Each cell in this row contains at least 3 - characters, and an optional : character to indicate alignment. Each cell is separated by a | character.
Default alignment only uses - characters; 3 or more.
Left align the column by starting the cell with : and filling in the rest with : characters; 3 or more.
Right align the column by starting the cell with 3 or more - characters, ending with a : character.
Center align the column by starting and ending the cell with : characters. Put - characters between them; 3 or more.
1 or more body rows, that contain body cell content separated by | characters.
Each row's content should be confined to a single line. The table will not parse properly if rows have multi-line content.
Optionally, all lines in the table can start and end with | characters. Be sure to apply them to all lines if they are to be used.
Basics
Two basic Tables; one with wrapping | characters, one without.
| name | age | city |
|---|---|---|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
---|---|---
Bob | 42 | Dallas
Mary | 37 | El Paso
Line up the | characters in each row for a nice touch for readibilty.
| name | age | city |
|------|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
------|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Left-align the text of cells in a column by starting the alignment cell with :. The first column is left-aligned in this example:
| name | age | city |
|:-----|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
:-----|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Right-align the text of cells in a column by ending the alignment cell with :. The first column is right-aligned in this example:
| name | age | city |
|-----:|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
-----:|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Center-align the text of cells in a column by starting and ending the alignment cell with :. The first column is center-aligned in this example:
| name | age | city |
|:----:|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
:----:|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Each column gets it's own alignment. Mix them together as needed.
| name | age | city |
|:-----|:---:|--------:|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
name | age | city
:-----|:---:|--------:
Bob | 42 | Dallas
Mary | 37 | El Paso
Markdown In Tables
Inline Markdown elements, like bold, italic, and even inline HTML, can be used with cell text content.
| name | age | city |
|----------|-----|---------|
| **Bob** | 42 | Dallas |
| **Mary** | 37 | El Paso |
name | age | city
----------|-----|---------
**Bob** | 42 | Dallas
**Mary** | 37 | El Paso
Markdown++
A custom Table Style can be given to a Table using a Markdown++ style tag on the line directly above the Table.
<!--style:CustomTable-->
| name | age | city |
|------|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
<!--style:CustomTable-->
name | age | city
------|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Content in Cells
Inline text content can be customized using the inline tag convention.
| name | age | city |
|-------------------------------|-----|---------|
| <!--style:CustomText-->*Bob* | 42 | Dallas |
| <!--style:CustomText-->*Mary* | 37 | El Paso |
name | age | city
-------------------------------|-----|------
<!--style:CustomText-->*Bob* | 42 | Dallas
<!--style:CustomText-->*Mary* | 37 | El Paso
ePublisher Style Information
Style Behavior
In order to style a Table and it's cells in detail, a few different styles are needed in ePublisher. A Table gets 3 styles when ePublisher detects one in a document.
The example below populates the Style Designer with 1 Table Style called Table, and 2 Paragraph Styles: Table Cell Head, and Table Cell Body when scanned into ePublisher.
> # Heading 1 element inside a blockquote
>
> This is a Paragraph element inside of a blockquote.
>
Table Style
The Table Style is the first style that ePublisher adds to the Style Designer when a table is detected in a source document. The default name is Table, but could also be a custom name if the style tag syntax is used on the table.
This style applies table-specific style rules to the entire table. It is the only style in Markdown++ that creates an entry in the Table Styles area in the Style Designer.
Customizing the Table Style
By adding a Markdown++ custom style tag, the Table Style name can be changed. The examples below change the Table Style name to CustomTable:
<!--style:CustomTable-->
| name | age | city |
|------|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
<!--style:CustomTable-->
name | age | city
------|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Header & Body Cell Styles
Every cell on a header row gets a Header Cell Style. Each cell on body rows get a Body Cell Style as well. To determine the Header Cell Style's name, ePublisher takes the Table Style and adds Cell Head to the end for Header Cell Styles, and Cell Body to the end for Body Cell Styles. The default names are Table Cell Head and Table Cell Body, but these will also be customized if the Table Style has a custom name.
Customizing Header & Body Cell Styles
By adding a Markdown++ custom style tag, the Header & Body Cell Style names can be changed. The example below changes the style names to CustomTable Cell Head and CustomTable Cell Body because the Table Style has been given the custom style name CustomTable:
<!--style:CustomTable-->
| name | age | city |
|------|-----|---------|
| Bob | 42 | Dallas |
| Mary | 37 | El Paso |
<!--style:CustomTable-->
name | age | city
------|-----|------
Bob | 42 | Dallas
Mary | 37 | El Paso
Default Style Properties
Style Type: Table, Paragraph
Style Name: Table, Table Cell Head, Table Cell Body
Table
Property | Value |
|---|
border top color | #222222 |
border top style | solid |
border top width | 1px |
border right color | #222222 |
border right style | solid |
border right width | 1px |
border bottom color | #222222 |
border bottom style | solid |
border bottom width | 1px |
border left color | #222222 |
border left style | solid |
border left width | 1px |
Table Cell Head
Property | Value |
|---|
font family | Arial |
font size | 11pt |
font weight | bold |
padding top | 6pt |
padding right | 6pt |
padding bottom | 6pt |
padding left | 6pt |
Table Cell Body
Property | Value |
|---|
font family | Arial |
font size | 11pt |
padding top | 6pt |
padding right | 6pt |
padding bottom | 6pt |
padding left | 6pt |
If a custom style name is assigned to a Table, the style names will still inherit all of the listed default style information.