Go Premium for a chance to win a PS4. Enter to Win


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

Posted on 2011-09-12
Medium Priority
Last Modified: 2012-05-12
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.

Question by:Kelvin4
  • 3
  • 3
LVL 18

Expert Comment

ID: 36527201
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.

Author Comment

ID: 36528702
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
LVL 18

Accepted Solution

Rartemass earned 2000 total points
ID: 36533543
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:

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.


Author Closing Comment

ID: 36534970
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
LVL 18

Expert Comment

ID: 36540663
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.

Author Comment

ID: 36540924
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...

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question