Tables

Authoring Source Documents » Markdown++ Source Documents » Learning Markdown » Tables

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 structure is kept simple.

If a Table with complex structure is needed, it can be created as an HTML fragment in a Block HTML element.

Markdown++ also supports multiline tables, which provide additional flexibility for structuring content. To learn more, see the Multiline Tables in Markdown++ page.

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 readability.

| 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 its 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 its 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/15/2024