Move more Docs pages to Pug

1 files changed, 64 insertions, 0 deletions

diff --git a/docs/src/contents/tables.pug b/docs/src/contents/tables.pug
new file mode 100644
index 0000000..a66aa34
--- /dev/null
+++ b/docs/src/contents/tables.pug
@@ -0,0 +1,64 @@
+p Tables include default styles for tables and data sets.
+
+.columns
+  .column.col-12
+    table.table.table-striped
+      thead
+        tr
+          th Name
+          th Genre
+          th Release date
+      tbody
+        tr
+          td The Shawshank Redemption
+          td Crime, Drama
+          td 14 October 1994
+        tr
+          td The Godfather
+          td Crime, Drama
+          td 24 March 1972
+        tr
+          td Schindler's List
+          td Biography, Drama, History
+          td 4 February 1994
+        tr
+          td Se7en
+          td Crime, Drama, Mystery
+          td 22 September 1995
+
+p
+  | Add the 
+  code table
+  |  class to any 
+  = '<table>'
+  |  element. The class will add padding, border and emphasized table header. Use the 
+  code table-striped
+  |  class to 
+  = '<table>'
+  |  to add zebra striped style. For hoverable table rows, you can add the 
+  code table-hover
+  |  class to enable hover style.
+p
+  | Use the 
+  code active
+  |  class to make <tr> element highlighted.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>name</th>
+            <th>genre</th>
+            <th>release date</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="active">
+            <td>The Shawshank Redemption</td>
+            <td>Crime, Drama</td>
+            <td>14 October 1994</td>
+          </tr>
+        </tbody>
+      </table>
\ No newline at end of file