Placing rectangle and line shapes in an HTML table cell by DIV

I want to build a flow chart diagram in a single HTML table cell, by creating and positioning the individual rectangles and arrowed lines to form the chart components.

1. I have a DIV within a table cell:

<table border="1">
<tr>
<td>100</td>
        <td>200</td>
        <td>300</td>
</tr>
<tr>
             <div id="my_box">
                    <td colspan = 2>
                            <p>I'm text in a div.</p>
                    </td>
</div>
        <td>600</td>
</tr>
<tr>
  <td>400</td>
  <td>500</td>
  <td>600</td>
</tr>
</table>

2. I have a specification for one rectangle:

<div class=rectangle/>

.rectangle
{
   width:100px;
   height:100px;
   border: 1px solid #000;
   background-color: pink;
}

How do I use these two code sets to create the rectangle within the cell?
How do I add another rectangle at another (actually, non-overlapping) position within that same cell?
How do I use px coordinates to define the position of these two shapes within the same table cell?

Many thanks
Kelvin