# Table

Tables are configured using a combination of | pipe characters to separate columns and at least three --- dashes to separate the header row from the table body.

The following sample demonstrates a basic table configuration:

Name   | Value
---    | ---
Item 1 | Blue
Item 2 | Green

The above configuration creates the following table in the final generated website:

The | pipe character column separators are not required to vertically align. Extra whitespace within the column widths is ignored and the result will look the same.

Name | Value
--- | ---
Item 1 | Blue
Item 2 | Green

The alignment of text within a column can be configured by using the : colon character within the header separator row.

By default, text is left aligned. To center align text, use :---: with colons at both ends of the header separator. To right align text, use ---: with a colon on the right end of the header separator.

Name   | Value | Description
:---   | :---: | ---:
Item 1 | Blue  | This is `Item 1`.
Item 2 | Green | This is `Item 2`.

A table compact style is possible by applying the compact class.

The compact style reduces the cell padding and text size across the entire table.

{.compact}
Name   | Value
---    | ---
Item 1 | Blue
Item 2 | Green

The compact class can also be applied to the table using the following technique:

Name   | Value {.compact}
---    | ---
Item 1 | Blue
Item 2 | Green