Repository navigation
Tables
Tables should be added to the documentation in standard markdown table notation.
This example outlines the key elements. The boundaries of each column are defined by pipe (|) delimiters and the header is separated from the body of the table using a sequence of hyphens:
| **Syntax** | **Description** |
| --------------- | --------------- |
| Header | Title |
| Paragraph | Text |
| Syntax | Description |
|---|---|
| Header | Title |
| Paragraph | Text |
Table headings should always be set in bold, using the double asterisk syntax. E.g. **Column heading**. Table headings should also generally be in sentence case, unless referring to something that would naturally be expressed in title case (such as a product name).
Tables can be formatted with alignment for better readability in the markdown as above, but they also render the same in the documentation if not as below:
| **Syntax** | **Description** |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |
Generally, smaller tables benefit from better readability in the markdown. However, larger tables and tables with large cell entries (such as URLs or relref links) may be difficult to align. Therefore use your judgement when formatting the markdown.
Column text alignment can also be controlled like so:
| **Syntax** | **Description** | **Test text** |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
Which renders like this:
| Syntax | Description | Test text |
|---|---|---|
| Header | Title | Here's this |
| Paragraph | Text | And more |
If you need to create a table with no header row, leave the header row empty and use the .no-header class as a modifier:
| | | |
| :--- | :----: | ---: |
| Header | Title | Here's this |
| Paragraph | Text | And more |
{.no-header}
Other style modifications can also be defined in a similar way by adding the style as a class in an appropriate file in assets/scss and appending the class to the table as above.
You can display a pipe (|) character in a table by using its HTML character code (|).