From ff1556888878dda13f900bdfc67c7bff0eb83c66 Mon Sep 17 00:00:00 2001
From: Susam Pal <susam@susam.in>
Date: Tue, 29 Dec 2020 17:28:29 +0530
Subject: [PATCH] Add light borders for table cells

---
 README.md  |  7 ++++---
 index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 sp.css     | 11 +++++++++++
 3 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 27feb77..9f3d634 100644
--- a/README.md
+++ b/README.md
@@ -107,9 +107,9 @@ Why SPCSS?
 I often develop primarily text-based websites and webpages. The default
 style chosen by the web browsers while decent leaves a bit to be
 desired, so I often add a minimal stylesheet to improve the apperance of
-the document, hyperlinks, code blocks, blockquotes, etc. This project
-shares the minimal stylesheet that I often rely on for styling simple
-websites and webpages.
+the document, hyperlinks, code blocks, blockquotes, tables, etc. This
+project shares the minimal stylesheet that I often rely on for styling
+simple websites and webpages.
 
 You are welcome to [fork this repository][fork] and customize it to
 maintain your own copy of [sp.css](sp.css) with styles that you
@@ -144,6 +144,7 @@ Here is a summary of the style changes provided by SPCSS:
 - Prevent very long lines of code from overflowing outside the gray box
   for code blocks. Instead, make the code block scrollable when the code
   overflows the gray box.
+- Light borders for table cells.
 
 See [this example page][Demo URL] for a quick demonstration of some of
 these features.
diff --git a/index.html b/index.html
index f005541..0646020 100644
--- a/index.html
+++ b/index.html
@@ -119,6 +119,54 @@ hello, world&lt;/samp&gt;
   the rendered width of any image on the page does not exceed the width
   of the HTML body. This prevents the page layout from appearing broken.
 </p>
+<h2 id="table">Table<a href="#table"></a></h2>
+<p>
+  This section shows an example of an HTML table.
+</p>
+<table>
+  <tr>
+    <th>Editor</th>
+    <th>Creator</th>
+    <th>License</th>
+    <th>First Release</th>
+  </tr>
+  <tr>
+    <td>GNU Emacs</td>
+    <td>Richard Stallman</td>
+    <td>GNU GPLv3+</td>
+    <td>20 Mar 1985</td>
+  </tr>
+  <tr>
+    <td>Vim</td>
+    <td>Bram Moolenaar</td>
+    <td>Vim License</td>
+    <td>02 Nov 1991</td>
+  </tr>
+  <tr>
+    <td>GNU nano</td>
+    <td>Chris Allegretta</td>
+    <td>GNU GPLv3</td>
+    <td>18 Nov 1999</td>
+  </tr>
+  <tr>
+    <td>Notepad++</td>
+    <td>Don Ho</td>
+    <td>GNU GPLv2</td>
+    <td>24 Nov 2003</td>
+  </tr>
+  <tr>
+    <td>Atom</td>
+    <td>GitHub</td>
+    <td>MIT</td>
+    <td>26 Feb 2014</td>
+  </tr>
+  <tr>
+    <td>Visual Studio Code</td>
+    <td>Microsoft</td>
+    <td>MIT</td>
+    <td>29 Apr 2015</td>
+  </tr>
+</table>
 <h2 id="heading-anchor">Heading Anchor<a href="#heading-anchor"></a></h2>
 <p>
   When you hover your cursor (mouse pointer) on the section heading
diff --git a/sp.css b/sp.css
index f5200b4..8f7e8f1 100644
--- a/sp.css
+++ b/sp.css
@@ -64,6 +64,14 @@ blockquote :first-child {
 blockquote :last-child {
   margin-bottom: 0;
 }
+table {
+  border-collapse: collapse;
+}
+th, td {
+  border: thin solid #999;
+  padding: 0.3em 0.4em;
+  text-align: left;
+}
 @media (prefers-color-scheme: dark) {
   body {
     color: #bbb;
@@ -87,4 +95,7 @@ blockquote :last-child {
   blockquote {
     border-color: #444;
   }
+  th, td {
+    border-color: #666;
+  }
 }