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 
To learn more about Markdown++ tagging, see Learning Markdown++.
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.
Was this helpful?
Last modified date: 11/12/2021