feat: add table support

index.html

@@ -83,7 +83,7 @@
     <form action="#">
         <input type="submit" value="Submit">
     </form>
-    <table border="1" cellspacing="0" cellpadding="5">
+    <table class="centered">
         <tr>
             <td>Row 1, Column 1</td>
             <td>Row 1, Column 2</td>
@@ -95,6 +95,44 @@
             <td>Row 2, Column 3</td>
         </tr>
     </table>
+    <table border="1" cellspacing="0" cellpadding="5">
+        <tr>
+            <th>Row 1, Column 1</th>
+            <th>Row 1, Column 2</th>
+            <th>Row 1, Column 3</th>
+        </tr>
+        <tr>
+            <td>Row 1, Column 1</td>
+            <td>Row 1, Column 2</td>
+            <td>Row 1, Column 3</td>
+        </tr>
+        <tr>
+            <td>Row 2, Column 1</td>
+            <td>Row 2, Column 2</td>
+            <td>Row 2, Column 3</td>
+        </tr>
+    </table>
+    <table>
+        <thead>
+            <tr>
+                <th>Row 1, Column 1</th>
+                <th>Row 1, Column 2</th>
+                <th>Row 1, Column 3</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Row 1, Column 1</td>
+                <td>Row 1, Column 2</td>
+                <td>Row 1, Column 3</td>
+            </tr>
+            <tr>
+                <td>Row 2, Column 1</td>
+                <td>Row 2, Column 2</td>
+                <td>Row 2, Column 3</td>
+            </tr>
+        </tbody>
+    </table>
     <img src="https://via.placeholder.com/800x600/" alt="">
     <nav>
         <ul class="menu">

src/_typography.scss

@@ -6,7 +6,8 @@ h4,
 h5,
 h6,
 ul,
-ol {
+ol,
+table {
     padding: 0;
     margin: 0 0 1rem 0;
 }

src/components/_tables.scss

@@ -0,0 +1,37 @@
+table {
+  border-collapse: separate;
+  width:100%;
+  border:0;
+  border-spacing: 3px;
+}
+
+table.centered th, table.centered td {
+  text-align: center;
+}
+
+tr, th, td {
+  border:0;
+}
+
+th, td {
+  background-color: var(--color-background-alt);
+  padding:.33rem .66rem;
+}
+
+table:not(:has(thead)) tr:first-child, table > tr:first-child, table thead tr:first-child {
+  td:first-child, th:first-child {
+    border-top-left-radius: var(--well-radius);
+  }
+  td:last-child, th:last-child {
+    border-top-right-radius: var(--well-radius);
+  }
+}
+
+table > tr:last-child, table tbody tr:last-child {
+  td:first-child, th:first-child {
+    border-bottom-left-radius: var(--well-radius);
+  }
+  td:last-child, th:last-child {
+    border-bottom-right-radius: var(--well-radius);
+  }
+}

src/main.scss

@@ -27,4 +27,5 @@
 @import 'components/cards';
 @import 'components/well';
 @import 'components/buttons';
-@import 'components/menus';
+@import 'components/menus';
+@import 'components/tables';