Getting fancy with the color table

* Added color samples to the color scheme table
* Tried my hand at some CSS
* Try to make the background color not fill the whole cell
* Use a span or div with padding?

Author: DreymaR

docs/content/styles/main.css

@@ -70,6 +70,25 @@ table td p.legend {
   text-align: center;
 }
 
+.color-table {
+  margin: 0 auto;
+  border: 2px solid #666;
+  border-collapse: collapse;
+}
+
+.color-table td {
+  padding: 5 px;
+  text-align: center;
+  border-spacing: 10 px;
+  border: 1px solid;
+}
+
+.color-table td div {
+  padding: 10 px;
+  width: 100%;
+  height: 100%;
+}
+
 .table-container {
   overflow-y: auto;
 }

docs/layers-main.html

@@ -140,13 +140,18 @@ <h3>Finger Shui!</h3>
                 It's convenient that the Wood element can be represented either as blue or green. 
                 On the left hand, colors are a little warmer as that hand is considered more Yin.
             </p><br>
-            <table class="center" style="width: 50%; margin: auto;">
-                <tr><th>Finger</th> <th>Element</th><th>Color</th>      </tr>
-                <tr><td>Thumb</td>  <td>Earth</td>  <td>Gold</td>       </tr>
-                <tr><td>Index</td>  <td>Wood</td>   <td>Green/Blue</td> </tr>
-                <tr><td>Middle</td> <td>Fire</td>   <td>Red</td>        </tr>
-                <tr><td>Ring</td>   <td>Metal</td>  <td>White</td>      </tr>
-                <tr><td>Pinky</td>  <td>Water</td>  <td>Gray</td>       </tr>
+            <table class="color-table" style="width: 50%">
+                <tr><th>Finger</th> <th>Element</th><th>Color</th>      <th colspan="2">Samples</th>            </tr>
+                <tr><td>Thumb</td>  <td>Earth</td>  <td>Gold</td>       <td colspan="2"><div style="background-color:#eeb">
+                                                                                                               </div></td></tr>
+                <tr><td>Index</td>  <td>Wood</td>   <td>Green/Blue</td> <td><div style="background-color:#9f8"></div></td><!-- 9f8/89f -->
+                                                                        <td><div style="background-color:#89f"></div></td></tr>
+                <tr><td>Middle</td> <td>Fire</td>   <td>Red</td>        <td><div style="background-color:#f98"></div></td><!-- f98/f89 -->
+                                                                        <td><div style="background-color:#f89"></div></td></tr>
+                <tr><td>Ring</td>   <td>Metal</td>  <td>White</td>      <td><div style="background-color:#eed"></div></td><!-- eed/dee -->
+                                                                        <td><div style="background-color:#dee"></div></td></tr>
+                <tr><td>Pinky</td>  <td>Water</td>  <td>Gray</td>       <td><div style="background-color:#baa"></div></td><!-- baa/aab -->
+                                                                        <td><div style="background-color:#aab"></div></td></tr>
             </table><br>
             <!-- ul class="disc">
                 <li><b>Thumb: Earth</b> (gold)      </li>