From 15d7a0880cde0082ab73f64ce9b3e7fddf2fe41e Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Tue, 20 Dec 2016 11:49:03 +0200
Subject: [PATCH] Table quick reference

---
 docs/quick_reference.html | 22 +++++++++++++++++++---
 docs/v2/DEVLOG.md         |  1 +
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index deb234c..35cd313 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -689,7 +689,18 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Table structure as follows:
+                  <ol>
+                    <li><code>&lt;table&gt;</code> element is the table's root element</li>
+                    <li><code>&lt;caption&gt;</code> (optional) serves as the table's title and must be the first element inside the table</li>
+                    <li><code>&lt;thead&gt;</code> serves as the table's header row, populated with <code>&lt;th&gt;</code></li>
+                    <li><code>&lt;tfoot&gt;</code> (optional) serves as the table's footer and must be immediately after <code>&lt;thead&gt;</code></li>
+                    <li><code>&lt;tbody&gt;</code> is the table's body, populated with <code>&lt;td&gt;</code> elements</li>
+                  </ol>
+                  </li>
+                  <li>Tables are responsive and collapse into cards on mobile devices</li>
+                  <li>Always specify a <code>data-label</code> for each <code>&lt;td&gt;</code> element corresponding to the column's header to properly display table on mobile devices</li>
+                  <li>For horizontal tables or matrices, check the examples below</li>
                 </ul>
               </div>
             </div>
@@ -744,7 +755,9 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>.horizontal</code> class to make a <code>&lt;table&gt;</code> horizontal</li>
+                  <li>Does not support the <code>&lt;tfoot&gt;</code> element</li>
+                  <li>Horizontal tables might not be fully compatible with older browsers</li>
                 </ul>
               </div>
             </div>
@@ -774,7 +787,10 @@
               <div class="col-sm-12 col-md-6">
                 <h3>Notes</h3>
                 <ul>
-                  <li></li>
+                  <li>Use the <code>.striped</code> class to make a <code>&lt;table&gt;</code> striped</li>
+                  <li>Use the <code>.preset</code> class to make a <code>&lt;table&gt;</code> to create matrices or otherwise preset tables</li>
+                  <li>Preset matrix tables might require some CSS tweaks to deal with border styling errors</li>
+                  <li>You can combine <code>.striped</code>, <code>.preset</code> and <code>.horizontal</code>, respecting the rules of the combined structures</li>
                 </ul>
               </div>
             </div>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index 5992cb0..5cbba0e 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -683,3 +683,4 @@
 ## 20161220
 
 - Added notes for `input_control` in `quick reference`.
+- Documented `table` in `quick reference`.