From a2a229c720efe1febcf518e410f4a38016ccc2d7 Mon Sep 17 00:00:00 2001
From: Herwin <Herwin@DESKTOP-VH5FH4E.local>
Date: Thu, 14 Nov 2024 21:07:01 +0100
Subject: [PATCH] Added tables page Update index.php, sidebar.php, and 2 more
 files...

---
 htdocs/index.php         |  3 ++
 htdocs/parts/sidebar.php |  7 +++++
 htdocs/parts/tables.php  | 66 ++++++++++++++++++++++++++++++++++++++++
 scss/site/table.scss     |  1 +
 4 files changed, 77 insertions(+)
 create mode 100644 htdocs/parts/tables.php

diff --git a/htdocs/index.php b/htdocs/index.php
index 4818cd0..e3d7691 100644
--- a/htdocs/index.php
+++ b/htdocs/index.php
@@ -106,6 +106,9 @@
     <!-- Grids -->
     <?php include("./parts/grids.php"); ?>
 
+    <!-- Tables -->
+    <?php include("./parts/tables.php"); ?>
+
     <!-- Horizontal Rulers -->
     <?php include("./parts/horizontal_rulers.php"); ?>
 
diff --git a/htdocs/parts/sidebar.php b/htdocs/parts/sidebar.php
index 0d16f63..908bfb5 100644
--- a/htdocs/parts/sidebar.php
+++ b/htdocs/parts/sidebar.php
@@ -88,6 +88,13 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
         </p>
     </a>
 
+    <a class="a-hidden" href="#tables">
+        <p class="t-size-18 t-w-500 py-xs sidebar-entry">
+            <i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i>
+            <span class="t-size-12">Tables</span>
+        </p>
+    </a>
+
     <hr class="subtle">
 
     <a class="a-hidden" href="#horizontal-rulers">
diff --git a/htdocs/parts/tables.php b/htdocs/parts/tables.php
new file mode 100644
index 0000000..a068114
--- /dev/null
+++ b/htdocs/parts/tables.php
@@ -0,0 +1,66 @@
+<?php
+// Making sure the file is included and not accessed directly.
+if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
+    header('HTTP/1.1 403 Forbidden'); die();
+}
+?>
+
+<a id="tables"></a>
+<div class="p-xs b r-s bkgd-grid mt-m">
+    <h2 class="t-w-500 t-size-14">Tables
+        <i class="fa-solid fa-table f-right"></i>
+    </h2>
+</div>
+<section class="p-s">
+    <h3 class="t-w-500 t-size-12 my-s">Unstyled table</h3>
+    <p class="mb-s">
+        Unstyled tables have no cell gap, no border and no other form of styling.
+    </p>
+    <table>
+        <tr>
+            <td>Cell 1.1</td>
+            <td>Cell 1.2</td>
+        </tr>
+        <tr>
+            <td>Cell 2.1</td>
+            <td>Cell 2.2</td>
+        </tr>
+    </table>
+    <code class="d-block p-xxs border r-s mt-s">
+        <b>table&gt;tr*2&gt;td*2</b>
+    </code>
+
+    <h3 class="t-w-500 t-size-12 my-s">Stylish table</h3>
+    <p class="mb-xxs">
+        Tables can quickly be styled by simply using the following classes:
+    </p>
+    <ul class="mb-s">
+        <li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
+        <li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
+        <li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
+        <li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
+    </ul>
+    <table class="stylish table-p-s border">
+        <tr>
+            <th>Head 1</th>
+            <th>Head 2</th>
+        </tr>
+        <tr>
+            <td>Cell 1.1</td>
+            <td>Cell 1.2</td>
+        </tr>
+        <tr>
+            <td>Cell 2.1</td>
+            <td>Cell 2.2</td>
+        </tr>
+    </table>
+
+    <code class="d-block p-xxs border r-s mt-s">
+        table<b>.stylish.table-p-s.border</b><br>
+        &nbsp;&nbsp;th>td*2<br>
+        &nbsp;&nbsp;tr*2>td*2
+    </code>
+
+
+
+</section>
\ No newline at end of file
diff --git a/scss/site/table.scss b/scss/site/table.scss
index f1d4c93..c1ed917 100644
--- a/scss/site/table.scss
+++ b/scss/site/table.scss
@@ -48,6 +48,7 @@ table.stylish {
 	}
 }
 
+// FIXME: Move this out in its own alignment section...
 // Centers the cells' content vertically
 .table-v-center {
 	tr, td {