Positioning HTML shapes by coordinate & dimension values in part of an HTML page occupied by an HTML table

This question relates to placing individual HTML shapes to make a flow chart of low-scale pixel-precision on a page where many other items are positioned within the tags of an (invisible) HTML table. To do this, I believe I have a choice:

EITHER use divs independent of the table to position the flowchart
OR divs within a table, to position the flow chart components within one HTML table cell.

I seek to understand the best method to proceed, and would like to access an example of best practice.

What NOW is Rendered to HTML tags:
A data-driven system renders items of either shapes and text on browser pages as HTML.
Shapes are simple rectangles with text within.
There can be upto 25 of these small items per page.

The items are rendered within individual cells of an HTML table that is invisible on the browser.
HTML table tags (incl colspans and rowspans) give adequate layout control - with little or no padding.

THE NEED is to position a flow chart on the same page as these other blocks. Each instance of a browser page is different, and it is definately necessary of each flow chart to be generated as a data-driven set of individual shapes.

At present, without using HTML tables, I can position component shapes via coordinates and dimensions in the browser to create diagrams and flow charts.

I now seek the best of both worlds on the same browser page: freedom to create a flow-chart, and the ease of positioning the (upto) 25 other items (shapes and text) their individual cells of an HTML table.

I seem to have three choices:
1. Control the whole layout via divs (on a scale I am inexperienced with)
2. Create a merged cell via colspans and rowspans and use a div to position the flow chart elements within this one cell.
3. Some other solution, but not including the creation of an image file of the flow chart.

Option 2 is attractive to me (if practicable) since it builds on my existing processes, but it needd to be a reliable solution.
How does one write the HTML for a div that controls the border of an HTML table cell?

Not high Precision of layout:
The content and px position each of flowchart component (rectangles and arrowed lines) is known and is in the data-base. High precision layout is NOT necessary. The shapes need only show from which rectangle a flow-line starts, and to which rectangle its arrow head points.

Neatness is still possible:
can be aided by controlling the order of display of shapes, so rectangles can super-impose the start point of arrowed lines.

(Data source:
For clarity, the layout of these browser pages is driven by a database that is populated by data from a json string, which is in turn specified by an authoring application in which shape and text layout is setup and wrapped within HTML table tags. All basic dimensions and coordinates can be passed from the authoring system to the database.)

I would be grateful for the most practical solution.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RartemassLife CoachCommented:
Seeing how you already have the table set up for your existing stuff, it would be a bad idea to redo everything in divs. The best practice is to use divs etc for layout and keep tables for displaying tabular data only.
So unless you want to redesign the entire site, I'd simply modify what you already have.

It would help us if we can see the existing code and an idea of where these additional elements will go (above table, below table, in same cell, in another cell).

I'm not sure exactly what you mean by a div that controls the border of a table. You can wrap a div around the table, and have the table fit 100% into that div. The div can be assigned a border, and the table can be assigned its own different border.
With option 2 are you suggesting to place a div inside a table cell to display the additional information?

With your current code, are you only using one cell of a table? If so then it may actually be easier to change everything to a div and update the styling accordingly. Again without seeing your code it will be difficult to give the best solution.
Kelvin4Author Commented:
Hi Rartemass: thanks for tackling this.

I would like to maintain my present HTML table.

My HTML is weak:
Here is the HTML for a small 'sample'  table which shows the tags I use.
You will see the line: <th rowspan="2">Rectangle shape here</th>

I would like to position a rectangle shape in the cell labelled "Rectangle shape here", at a specific px position from the top left corner of that cell, say 30px right and 20px down. .. If I could do that, then i would aim to build in other rectangle and line shapes (maybe ten of each, within the same table cell and achieve my goal of a flow chart. Is that sensible?

<table border="1">
  <td>Item A</td>
  <th rowspan="2">Rectangle shape here</th>
  <td>Item B</td>
  <td>Item C</td>

There is more detail to the table content, but I have left them out as I dont THINK they impinge on the present question. The test of the solution will be the trial of that!!

Your other questions:
"I'm not sure exactly what you mean by a div that controls the border of a table. You can wrap a div around the table, and have the table fit 100% into that div. The div can be assigned a border, and the table can be assigned its own different border.
With option 2 are you suggesting to place a div inside a table cell to display the additional information?"
Q1: "I'm not sure exactly what you mean by a div that controls the border of a table.
Ans1: I think I meant this: The div can be assigned a border. (This came from previous discussion which did not develop further - and I incomletely understood.)

Q2: With option 2 are you suggesting to place a div inside a table cell to display the additional information?"
Ans2: Yes: this was a suggestion I received, but I dont know if or how to implement it.

With many thanks
RartemassLife CoachCommented:
Divs can work in tables if you use the correct layout.
This page will assist in making divs work inside tables. It is one of the better techniques.

You can then use CSS to target that specific div either via setting a class or ID on the div or by being explicit in the CSS (table tr td div { style stuff } ). I find using classes and IDs the better approach.

To position the "rectangle shape here" you can use positioning, margins, padding, or invisible borders.
Margins and padding don't work well together in some browsers (I'm looking at you IE) so its best to ensure you only use one of them for elements in the same region.
I prefer padding myself.

Info for margins:

This should assist in using positioning:

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Kelvin4Author Commented:
Hi Rartemass,
Thanks, that's ideal.
I have now used the 'divs in table' resource to control div location inside cells with col and row - span control.

Will tackle the other issues, and may need further advice.

I have set my account to 'follow' you. I hope that means you will see any further questions from me on HTML. Is that how 'FOLLOW' works?

Best regards
RartemassLife CoachCommented:
No worries, glad to assist.

With you following me, you can see what questions I participate in.
I believe I would have to follow you for me to be notified when you create additional questions.
I do however receive notification of all questions in the HTML zone each hour so I will see them when created. I check EE every few hours so someone else may have resolved your issues before I get to them. I will keep an eye out for your future questions however.
Kelvin4Author Commented:
This new Q is current,
14/09/11 02:48 PM   Placing rectangle and line shapes in an HTML table cell by DIV

My error has been corrected, but its  not progressing as I had hoped toward building a script in which i can control the size and position of the rectangle.

As you  will see I tried to modify the rectangle by adding parameters in { }, but no joy...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.