Citrus Table | Table O Contents
Place the introducing line of text ie.) the ‘tagline’ here …
Note. The Flammarion Logo Badge in the page header above is an .svg image file set to the dimensions of 5% width, auto height, and zoom. Go ahead and test the zoom-out feature by hovering over the badge to engage the expansion of the image.
First Subtitle
Hint. Place the intro paragraph ie.) the ‘hypothesis’ here …
More to come …
Table (Mesa) O Citrus ( de Citrus )
This rendition of the Kramdown table has a class ( the class holds a border ), an id, and a footer.
Note. No Html has been used to construct this table. Only Markdown - Kramdown syntax has been used to compile the table features.
Classes and IDs
A reference to the ‘table’ class housed at the given ‘jekyll-theme-cayman.scss’ file located in the ‘_sass’ folder along with a reference to the ‘groove-table’ class housed at the custom ‘style dot scss file’ under the ‘assets/css sub-folder’ may be placed after the final frame of the table, as follows:
|---------+---------+---------|
{: .table .groove-table #TableCage}
Note. The id for the table is declared after the class references, as shown above.
By declaring the classes and establishing an ‘id’ at the tail-end of the table frame, the rendered table when generated by the browser will display the attributes of the classes referenced, as well as provide a conduit to the DOM for manipulation by ID.
Style dot scss
The style design of the exterior table border is, as follows:
/* Set the Table Border */
.groove-table {
border: 5px groove green;
}
/* End Setting the Table Border */
Header Column Alignment
The header columns are left-aligned, center-aligned, and right aligned respectively, as follows:
|---------+---------+---------|
|English - Citrus|Photo|Spanish - Citrus|
|---------|:---------:|---------:|
Optional Footer
The optional footer is rendered by a frame of double-hyphens, or ‘equal signs’ ========= placed after the last row of data followed by the text of the footer placed directly above the final frame |---------+---------+---------| of the table, as follows:
|=========+=========+=========|
|This is an optional footer row of text ...|
|---------+---------+---------|
Table Data
The internal columns of table data have been entered manually row-by-row after the introducing header frame, as follows:
|Blackberries||Zarzamoras|
|Raspberries||Frambuesas|
Note. Placing the table data in a json file under the ‘_data’ subdirectory and calling for each ‘bag’ in ‘bags’ may optionally populate the rows of the table programmatically with fruits, vegetables, and meats, as well.
Putting It All Together
To create a live rendition of the table as described, the individual components of the table must be aggregated, as follows:
|---------+---------+---------|
|English - Citrus|Photo|Spanish - Citrus|
|---------|:---------:|---------:|
|Blackberries||Zarzamoras|
|Raspberries||Frambuesas|
|=========+=========+=========|
|This is an optional footer row of text ...|
|---------+---------+---------|
{: .table .groove-table #TableCage}
Live Rendition
A live rendition of the ‘Table (Mesa) O Citrus ( de Citrus )’ is reproduced here by your browser …
| English - Citrus | Photo | Spanish - Citrus |
|---|---|---|
| Blackberries |  |
Zarzamoras |
| Raspberries | |
Frambuesas |
| This is an optional footer row of text … |
Table O Contents Code
- TOC
{:toc}
Note. Unordered Lists (ul) should be surrounded by blank lines in GitHub Flavored Markdown (GFM), except in those instances where a Kramdown command is subsequently evoked on the very next line.
Last Subtitle
More to come …
Note. The above synopsis was derived from an article written by Git Lab [1].
- GitLab Markdown Guide by Gitlab. Published by © 2017 Gitlab.com.
Support
Please support the co-workers who aggregate the Source Links for our projects.
Patreon
Like what you see in this project? If so, then support the authors and machine-elves who aggregate the source links and pages for our projects via Patreon.