diff -r b1f2a893572f -r a17c644a0510 www/recipes.php
--- a/www/recipes.php	Tue Sep 04 23:12:13 2018 +0200
+++ b/www/recipes.php	Wed Sep 05 15:38:20 2018 +0200
@@ -136,17 +136,52 @@
      <div> <!-- tab water -->
       <div style="overflow: hidden;">
        <table>
-<!--        <tr>
-         <td align="right" style="vertical-align: top;">Schema naam:</td>
-         <td align="left" colspan="3" style="vertical-align: top;"><input id="name" /></td>
-        </tr>
+        <tr>
+         <td style="vertical-align: top; padding: 3px;float: right:">Water:</td>
+	 <td style="padding: 3px; float: left;"><div id="waterGrid"></div></td>
+	</tr>
         <tr>
-         <td align="right" style="vertical-align: top;">Opmerkingen:</td>
-         <td align="left" colspan="3"><textarea id="notes"></textarea></td>
-        </tr> -->
-        <tr>
-         <td align="right" style="vertical-align: top; padding: 3px;">Water:</td>
-         <td align="left" style="padding: 3px;"><div id="waterGrid"></div></td>
+         <td></td>
+         <td>
+          <div id='water_totals'>
+ 	   <table style="width: 100%;">
+            <caption>Water overzicht</caption>
+    	    <tr>
+	     <td></td>
+             <td style="width: 80px; padding: 3px;">Volume</td>
+             <td style="width: 80px; padding: 3px;">Ca</td>
+             <td style="width: 80px; padding: 3px;">Mg</td>
+             <td style="width: 80px; padding: 3px;">Na</td>
+             <td style="width: 80px; padding: 3px;">HCO3</td>
+             <td style="width: 80px; padding: 3px;">Cl</td>
+	     <td style="width: 80px; padding: 3px;">SO4</td>
+             <td style="width: 80px; padding: 3px;">pH</td>
+ 	    </tr>
+            <tr>
+	     <td style="vertical-align: top; padding: 3px; float: left;">Gemengd water:</td>
+             <td><div id="wg_volume"></div></td>
+             <td><div id="wg_calcium"></div></td>
+             <td><div id="wg_magnesium"></div></td>
+             <td><div id="wg_sodium"></div></td>
+             <td><div id="wg_total_alkalinity"></div></td>
+             <td><div id="wg_chloride"></div></td>
+	     <td><div id="wg_sulfate"></div></td>
+             <td><div id="wg_ph"></div></td>
+            </tr>
+            <tr>
+	     <td style="vertical-align: top; padding: 3px; float: left;">Behandeld water:</td>
+             <td><div></div></td>
+             <td><div id="wb_calcium"></div></td>
+             <td><div id="wb_magnesium"></div></td>
+             <td><div id="wb_sodium"></div></td>
+             <td><div id="wb_total_alkalinity"></div></td>
+             <td><div id="wb_chloride"></div></td>
+	     <td><div id="wb_sulfate"></div></td>
+             <td><div></div></td>
+            </tr>
+           </table>
+	  </div>
+         </td>
         </tr>
        </table>
       </div>