From 8c5110dddacba9c3b744b4972c6fdec187cfbdc1 Mon Sep 17 00:00:00 2001
From: "Kevin C. Coram" <kcoram@gmail.com>
Date: Sat, 7 Nov 2020 15:32:40 -0500
Subject: [PATCH] Create 'table' shortcode

Create shortcode to allow pages to provide CSS classes to apply to the
HTML table generated from a Markdown table.

Add some basic CSS styling for the table, to provide padding to make the
data easier to read.

Add a 'table-bordered' style to add borders to the table rows/columns.
---
 layouts/shortcodes/table.html |  6 ++++++
 static/css/style.css          | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 layouts/shortcodes/table.html

diff --git a/layouts/shortcodes/table.html b/layouts/shortcodes/table.html
new file mode 100644
index 0000000..c1dab56
--- /dev/null
+++ b/layouts/shortcodes/table.html
@@ -0,0 +1,6 @@
+{{ $htmlTable := .Inner | markdownify }}
+{{ $class := .Get 0 }}
+{{ $old := "<table>" }}
+{{ $new := printf "<table class=\"%s\">" $class }}
+{{ $htmlTable := replace $htmlTable $old $new }}
+{{ $htmlTable | safeHTML }}
diff --git a/static/css/style.css b/static/css/style.css
index e4ef7bd..4e2db0a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -99,4 +99,17 @@ figure img {
   figure img {
     max-width: calc(100vw - 510px);
   }
-}
\ No newline at end of file
+}
+
+/* Styes for tables */
+table, th, td {
+    padding: 0.5rem;
+}
+
+table.table-bordered,
+table.table-bordered td,
+table.table-bordered th {
+    border: 1px solid #dee2e6;
+    border-spacing: 2px;
+    border-collapse: collapse;
+}