Add light borders for table cells

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.

index.html

@@ -119,6 +119,54 @@ hello, world</samp>
   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

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;
+  }
 }