Tables can be generated a couple of different ways. Most commonly, tables should be generated using the figure_element approach via the table helper. This ensures tables can be referenced like any other figure.

Alternatively, for a more lightweight solution, they can be generated inline using markdown. The primary upside of basic Markdown is increased plain-text readability and a more integrated feeling in a page. However, markdown tables can’t leverage the layuot adjustments of the pull class.

Simple Markdown Tables

Sometimes, creating a full-on figure table is overdoing it. In those cases, using a basic Markdown table works fine as well. (Figure 1) Right-aligned columns will assume the values are digits and will automatically use monospace font styling.

| Lorem | Pretium | Ipsum | Dolor ||:-------------|:--------:|-------:|------:|| Consectetur | A | 1.00 | 123 || Adipiscing | B | 12.00 | 6 || Tempor | A | 12.00 | 6 || Dapibus | C | 12.00 | 6 |
Figure 1

By default, Markdown tables don’t offer row headers.

↩︎
Lorem Pretium Ipsum Dolor
Consectetur A 1.00 123
Adipiscing B 12.00 6
Tempor A 12.00 6
Dapibus C 12.00 6

Row headers can be simulated by using bold Markdown for the values in the first column. (Figure 2) Similarly, other markdown conventions will work in Markdown tables for italics, code, and other elements.

| | Pretium | Ipsum | Dolor ||:-----------------|:--------:|-------:|------:|| **Consectetur** | A | 1.00 | 123 || **Adipiscing** | B | 12.00 | 6 || **Tempor** | A | 12.00 | 6 || **Dapibus** | C | 12.00 | 6 |
Figure 2

For simple tables, row headers can be simulated using bold Markdown.

↩︎
Pretium Ipsum Dolor
Consectetur A 1.00 123
Adipiscing B 12.00 6
Tempor A 12.00 6
Dapibus C 12.00 6

Figure Tables

For richer tables, the table helper (Figures 3 & 4) works like the visual and code helpers by providing access to pull modifiers and a caption option. Figure tables still leverage Markdown for the primary content, but they integrate the table in with any other figure elements. That primarily enables the ability to adjust the layout of the table, but it also enables making references to the table from within the prose.

<%= table 'figure-table', pull: 'wide', caption: 'This is a fancy table!' do %>| Lorem | Pretium | Ipsum | Dolor ||:-------------|:--------:|-------:|------:|| Consectetur | A | 1.00 | 123 || Adipiscing | B | 12.00 | 6 || Tempor | A | 12.00 | 6 || Dapibus | C | 12.00 | 6 |<% end %>
Figure 3

For figure-based tables, the table helper does the trick. (Figure 4)  shows the resulting markup from the figure, and (Figure 5) shows how it will look on the page.

↩︎
<figure class="pull pull-wide" id="figure-5-figure-table"> <table><thead><tr><th style="text-align: left">Lorem</th><th style="text-align: center">Pretium</th><th style="text-align: right">Ipsum</th><th style="text-align: right">Dolor</th></tr></thead><tbody><tr><td style="text-align: left">Consectetur</td><td style="text-align: center">A</td><td style="text-align: right">1.00</td><td style="text-align: right">123</td></tr><tr><td style="text-align: left">Adipiscing</td><td style="text-align: center">B</td><td style="text-align: right">12.00</td><td style="text-align: right">6</td></tr><tr><td style="text-align: left">Tempor</td><td style="text-align: center">A</td><td style="text-align: right">12.00</td><td style="text-align: right">6</td></tr><tr><td style="text-align: left">Dapibus</td><td style="text-align: center">C</td><td style="text-align: right">12.00</td><td style="text-align: right">6</td></tr></tbody></table> <figcaption><strong>Figure 5</strong> <p>This is a fancy&nbsp;table!</p> <a class="ref-return" title="Back to Figure 5 Reference" href="#figure-5-figure-table-ref">&#8617;&#xFE0E;</a> </figcaption></figure>
Figure 4

While the table helper supports custom markup, using Markdown is generally better. This provides an example of the markup generated by using the Markdown approach.

↩︎
Lorem Pretium Ipsum Dolor
Consectetur A 1.00 123
Adipiscing B 12.00 6
Tempor A 12.00 6
Dapibus C 12.00 6
Figure 5

This is a fancy table!

↩︎

HTML Tables

In some cases, more complex tables may be necessary, but for now, the only option is to craft raw HTML to support table captions, row/column scopes, or other advanced table features.