Style tables

- Add colour/styling to table
- Change SoC table to be full width

blog/vm-seperation-of-concerns.html

@@ -38,36 +38,36 @@
 				<p>Some people will seperate each service into their own VM, however I don't believe this to be efficient (in all cases).</p>
 				<p>What I recommend is to take your server needs, and break them down into logical blocks, adding each of these blocks to their own VMs. This will keep certain things contained alone, as you want them seperated as much as possible (NAS, etc).</p>
 				<table>
-					<thead><tr><th>Concern/VM</th><th>Services</th></tr></thead>
+					<thead><tr><th colspan="2">Concern/VM</th><th colspan="5">Services</th></tr></thead>
 					<tbody>
 						<tr>
-							<th>Production Web Server</th>
+							<th colspan="2">Production Web Server</th>
 							<td>Nginx</td>
 							<td>PHP</td>
-							<td>CertBot</td>
+							<td colspan="5">CertBot</td>
 						</tr>
 						<tr>
-							<th>Staging Web Server</th>
+							<th colspan="2">Staging Web Server</th>
 							<td>Nginx</td>
 							<td>PHP</td>
 							<td>CertBot</td>
-							<td>mariaDB</td>
+							<td colspan="5">mariaDB</td>
 						</tr>
 						<tr>
-							<th>NAS</th>
+							<th colspan="2">NAS</th>
-							<td>OpenMediaVault</td>
+							<td colspan="5">OpenMediaVault</td>
 						</tr>
 						<tr>
-							<th>SQL server</th>
+							<th colspan="2">SQL server</th>
-							<td>mariaDB</td>
+							<td colspan="5">mariaDB</td>
 						</tr>
 						<tr>
-							<th>Torrent Box</th>
+							<th colspan="2">Torrent Box</th>
 							<td>Transmission</td>
 							<td>VPN (to external)</td>
 							<td>Sonarr</td>
 							<td>Radarr</td>
-							<td>Ombi</td>
+							<td colspan="5">Ombi</td>
 						</tr>
 					</tbody>
 				</table>

main.css

@@ -37,6 +37,26 @@ pre{
 	padding: 12px;
 }
 
+/* Table Design */
+table{
+	text-align: left;
+	width: 100%;
+	border-collapse: collapse;
+}
+td, th{
+	border: 1px solid #222;
+	padding: 9px 6px;
+}
+th{
+	padding: 12px;
+	color: white;
+}
+thead th{ background-color: #191919; }
+tbody th{ background-color: #292929; }
+
+tr:nth-child(even){ background-color: #FEFEFE; }
+tr:hover{ background-color: #DEDEDE; }
+
 /* Special Design */
 .tag{
 	font-size: 0.8rem;