Make it use a table

index.html

@@ -97,10 +97,42 @@
   </form>
 
   <p>
-    Your turnip prices will be one of the following patterns. Each range is the sell price for that day.
+
   </p>
 
-  <p id="output">
+  <p>
+    <table>
+      <caption>Your turnip prices will be one of the following patterns. Each range is the sell price for that day.</caption>
+      <thead>
+        <tr>
+          <th>Pattern</th>
+          <th colspan="2">Monday</th>
+          <th colspan="2">Tuesday</th>
+          <th colspan="2">Wednesday</th>
+          <th colspan="2">Thursday</th>
+          <th colspan="2">Friday</th>
+          <th colspan="2">Saturday</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>AM</th>
+          <th>PM</th>
+          <th>AM</th>
+          <th>PM</th>
+          <th>AM</th>
+          <th>PM</th>
+          <th>AM</th>
+          <th>PM</th>
+          <th>AM</th>
+          <th>PM</th>
+          <th>AM</th>
+          <th>PM</th>
+        </tr>
+      </thead>
+      <tbody id="output">
+
+      </tbody>
+    </table>
   </p>
 
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

js/scripts.js

@@ -534,11 +534,12 @@ $(document).on("input", function() {
 
   var output_possibilities = "";
   for (let poss of generate_possibilities(sell_prices)) {
-    var out_line = ""
+    var out_line = "<tr><td>" + poss.pattern_description + "</td>"
     for (let day of [...poss.prices].slice(2)) {
-      out_line += day.min + ".." + day.max + " "
+      out_line += "<td>" + day.min + ".." + day.max + "</td>"
     }
-    output_possibilities += poss.pattern_description + ": " + out_line + "<br>"
+    out_line += "</tr>"
+    output_possibilities += out_line
   }
 
   $("#output").html(output_possibilities)