add table and message capabilities

for only 130 bytes extra!

note: that number might not be 100% accurate

beta.html

@@ -50,6 +50,52 @@
 
 		<hr class="mediumwidth">
 
+		<div class="mediumwidth">
+			<table class="table table-striped">
+				<thead>
+					<tr>
+						<th>#</th>
+						<th>Widgets Sold</th>
+						<th>Revenue (&pound;)</th>
+						<th>Profit (&pound;)</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>1</td>
+						<td>5</td>
+						<td>10</td>
+						<td>2</td>
+					</tr>
+					<tr>
+						<td>2</td>
+						<td>10</td>
+						<td>20</td>
+						<td>4</td>
+					</tr>
+					<tr>
+						<td>3</td>
+						<td>500</td>
+						<td>1000</td>
+						<td>200</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+
+		<hr class="mediumwidth">
+
+		<div class="mediumwidth">
+			<message class="warning"><strong>Watch out!</strong> You don't have H9RBS.js installed.</message>
 
+			<br>
+
+			<message class="great"><strong>Great!</strong> You successfully frobjugated the minlingator's snorbdralob.</message>
+
+			<br>
+
+			<message><strong>Hey!</strong> You've got four thousand new grabjalognibs!</message>
+		</div>
+		<br><br>
 	</body>
 </html>

min.less

@@ -183,4 +183,45 @@ textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[ty
 	.navbar {
 		height: 7.5em;
 	}
+}
+
+/*
+	Tables
+*/
+
+table {
+	width: 100%;
+	border-spacing: 0;
+}
+
+.table th, .table td {
+	padding: 0.5em;
+	line-height: 1.4em;
+	text-align: left;
+	vertical-align: top;
+}
+
+.table td {
+	border-top: 1px solid #dddddd;
+}
+
+tbody tr:nth-child(2n-1) {
+	background: #E0E0E0;
+}
+
+/*
+	Messages
+*/
+
+message {
+	width: 100%;
+	display: block;
+	padding: 2em 0;
+	background: #A7D3E4;
+	&.warning {
+		background: rgb(228, 167, 167);
+	}
+	&.great {
+		background: #A7E4AE;
+	}
 }