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|
|---------|:---------:|---------:|

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|![Page Banner](/Markdown-Lessons-Project/assets/img/png/raspberry-frambuesa-32-x-32.png)|Zarzamoras|
|Raspberries|![Page Banner](/Markdown-Lessons-Project/assets/img/png/raspberry-frambuesa-32-x-32.png)|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|![Page Banner](/Markdown-Lessons-Project/assets/img/png/raspberry-frambuesa-32-x-32.png)|Zarzamoras|
|Raspberries|![Page Banner](/Markdown-Lessons-Project/assets/img/png/raspberry-frambuesa-32-x-32.png)|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 Page Banner Zarzamoras
Raspberries Page Banner 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].

  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.