Help Translating image to table

Question

I have a image that has 4 rectangles on it. The rectangles are (30, 50, 100, 100), (120, 107, 230, 159), (5 , 210, 70, 233), (133, 20, 328, 80)

I need to figure out how to translate that to a html page using tables so that each rectangle is one cell.

---

I solved it! Thanks guys :) I ended up using absolute positioning and divs as per suggestion. The python code i used is

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()

Answer 1

Write a script (in say, PHP...) that parses the input coordinates and produces tables or divs that are absolutely positioned via CSS.

An exact answer is dependent on the format of your input. Therefore, I leave the actual implementation as an exercise for you. If you have any questions, feel free to contact me.

Answer 2

Are you sure you want to use tables? Not only is it a bad idea, but you can't arbitrarily position table cells like in the image.

You're probably better off using positioned DIVs:

CSS:

#container {
  position: relative;
}

#rect1 {
  position: absolute;
  left: 30px;
  top: 50px;
  width: 70px; /* 100 - 30 */
  height: 50px; /* 100 - 50 */
}

/* similarly define rect2, rect3, rect4 */

HTML:

<div id="container">
  <div id="rect1"></div>
  <div id="rect2"></div>
  <div id="rect3"></div>
  <div id="rect4"></div>
</div>

Working example with one rectangle

Answer 3

You can't do it with table cells (in an easy way), but make each rectangle into a div with absolute positioning:

<div style="position: absolute; left: XXpx; top: YYpx; width: ZZpx; height: QQpx; border: 1px solid green" />

You can calculate XX, YY, ZZ and QQ based on the values you alread have for your rectangles.

XX is the first value. YY is the second value. ZZ is the third value minus the first value, and QQ is the fourth value minus the second value.