title: Help Translating image to table
body: <p>I have a image that has 4 rectangles on it.
  The rectangles are <code>(30, 50, 100, 100), (120, 107, 230, 159), (5 , 210, 70, 233), (133, 20, 328, 80)</code>
  <img src="https://i.stack.imgur.com/8lSUn.jpg" alt="alt text"></p>
  
  <p>I need to figure out how to translate that to a html page using tables so that each rectangle is one cell.</p>
  
  <hr>
  
  <p>I solved it! Thanks guys :)
  I ended up using absolute positioning and divs as per suggestion.
  The python code i used is</p>
  
  <pre><code>for i in range(len(rects)):
      page.div(style='position: absolute; left: ' + str(rects[i][0]) + 'px; top: ' + str(rects[i][1]) + 'px; width: ' + str(rects[i][2] - rects[i][0]) + 'px; height: ' + str(rects[i][3] - rects[i][1]) + 'px; border: 1px solid green')
  page.div.close()
  </code></pre>