<div style="text-align: center;">
	<table style="margin:0px auto; width:900px; border: 2px solid;">

		<tr style="text-align: center;">
			<td style = "text-align: center">Timestamp</td>
			<td style = "text-align: center">Device ID</td>
			<td style = "text-align: center">IP Address</td>
			<td style = "text-align: center">pH Level</td>
			<td style = "text-align: center">EC Level</td>
			<td style = "text-align: center">Water Level</td>
			<td style = "text-align: center">Photoresistor Level</td>
            <td style = "text-align: center">Min pH</td>
            <td style = "text-align: center">Max pH</td>
            <td style = "text-align: center">Min EC</td>
            <td style = "text-align: center">Max EC</td>
            
		</tr>
	<%  for(var i = 0; i < data.length; i++) { %>
                    <tr style="background-color: #c8c8c8;">
                        <td style="text-align: center"><%= data[i].timestamp%></td>
                        <td style="text-align: center"><%= data[i].deviceID%></td>
                        <td style="text-align: center"><%= data[i].IP_Address%></td>
                        <td style="text-align: center"><%= data[i].ph%></td>
                        <td style="text-align: center"><%= data[i].ec%></td>
                        <td style="text-align: center"><%= data[i].waterLevel%></td>
                        <td style="text-align: center"><%= data[i].photoResistor%></td>
                        <td style="text-align: center"><%= data[i].minPh%></td>
                        <td style="text-align: center"><%= data[i].maxPh%></td>
                        <td style="text-align: center"><%= data[i].minEc%></td>
                        <td style="text-align: center"><%= data[i].maxEc%></td>
                    </tr>
            <%  } %>
    </table>




    <form action="/demo" method="get">
    	<input type="submit" value="Back">
    </form>

</div>