diff --git a/docs/_tutorials/csv-to-table.md b/docs/_tutorials/csv-to-table.md
index 6a31b38b..7b7c315f 100644
--- a/docs/_tutorials/csv-to-table.md
+++ b/docs/_tutorials/csv-to-table.md
@@ -1,5 +1,5 @@
---
-title: Show CSV as a table
+title: Tabulate CSV Data
author: MichaelCurrin
date: 2020-04-01 20:30:00 +0200
---
@@ -36,11 +36,12 @@ Jack,Hill,25,Australia
That data file will now be available in Jekyll like this:
-{% highlight liquid %}
{% raw %}
+```liquid
{{ site.data.authors }}
+```
{% endraw %}
-{% endhighlight %}
+
## 2. Add a table
@@ -52,57 +53,56 @@ For example: `table_test.md`
---
title: Table test
---
-
```
-
### Inspect a row
Grab the first row and see what it looks like using the `inspect` filter.
-{% highlight liquid %}
{% raw %}
+```liquid
{% assign row = site.data.authors[0] %}
{{ row | inspect }}
+```
{% endraw %}
-{% endhighlight %}
The result will be a _hash_ (an object consisting of key-value pairs) which looks like this:
```ruby
{
- "First name"=>"John",
- "Last name"=>"Doe",
- "Age"=>"35",
- "Location"=>"United States"
+ "First name"=>"John",
+ "Last name"=>"Doe",
+ "Age"=>"35",
+ "Location"=>"United States"
}
```
Note that Jekyll _does_ in fact preserve the order here, based on the original CSV.
+
### Unpack a row
A simple solution would be to hardcode the field names when looking up the row values by key.
-{% highlight liquid %}
{% raw %}
+```liquid
{{ row["First name"] }}
{{ row["Last name"] }}
+```
{% endraw %}
-{% endhighlight %}
But we prefer a solution that will work for _any_ CSV, without specifying the column names upfront.
So we iterate over the `row` object using a `for` loop:
-{% highlight liquid %}
{% raw %}
+```liquid
{% assign row = site.data.authors[0] %}
{% for pair in row %}
-{{ pair | inspect }}
+ {{ pair | inspect }}
{% endfor %}
+```
{% endraw %}
-{% endhighlight %}
This produces the following. Note the first item in each pair is the _key_ and the second will be
the _value_.
@@ -120,24 +120,23 @@ Here we make a table with a single table row (`tr`), made up of table header (`t
the header name by getting the first element (at index `0`) from `pair`. We ignore the second
element as we don't need the value yet.
-{% highlight liquid %}
{% raw %}
+```liquid
- {% for row in site.data.authors %}
- {% if forloop.first %}
-
- {% for pair in row %}
- {{ pair[0] }} |
- {% endfor %}
-
- {% endif %}
- {% endfor %}
+ {% for row in site.data.authors %}
+ {% if forloop.first %}
+
+ {% for pair in row %}
+ {{ pair[0] }} |
+ {% endfor %}
+
+ {% endif %}
+ {% endfor %}
{% endraw %}
-{% endhighlight %}
+```
-
-For now,s we do not display any content for the second row onwards - we achieve this by using
+For now, we do not display any content from the second row onwards. We achieve this by using
`forloop.first`, since this will return true for the _first_ row and false otherwise.
@@ -150,58 +149,58 @@ For convenience, we render using the `tablerow` tag - this works like a `for` lo
data will be rendered with `tr` and `td` HTML tags for us. Unfortunately, there is no equivalent for
the header row, so we must write that out in full, as in the previous section.
-{% highlight liquid %}
{% raw %}
+```liquid
---
title: Table test
---
- {% for row in site.data.authors %}
- {% if forloop.first %}
-
- {% for pair in row %}
- {{ pair[0] }} |
- {% endfor %}
-
- {% endif %}
+ {% for row in site.data.authors %}
+ {% if forloop.first %}
+
+ {% for pair in row %}
+ {{ pair[0] }} |
+ {% endfor %}
+
+ {% endif %}
- {% tablerow pair in row %}
- {{ pair[1] }}
- {% endtablerow %}
- {% endfor %}
+ {% tablerow pair in row %}
+ {{ pair[1] }}
+ {% endtablerow %}
+ {% endfor %}
+```
{% endraw %}
-{% endhighlight %}
-With the code above, our output table should look like this:
+With the code above, the complete table would look like this:
-
- First name |
- Last name |
- Age |
- Location |
-
-
- John |
- Doe |
- 35 |
- United States |
-
-
- Jane |
- Doe |
- 29 |
- France |
-
-
- Jack |
- Hill |
- 25 |
- Australia |
-
+
+ First name |
+ Last name |
+ Age |
+ Location |
+
+
+ John |
+ Doe |
+ 35 |
+ United States |
+
+
+ Jane |
+ Doe |
+ 29 |
+ France |
+
+
+ Jack |
+ Hill |
+ 25 |
+ Australia |
+
That's it - you can now turn a CSV into an HTML table using Jekyll.