Solved

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

Posted on 2011-09-12
6
304 Views
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.

Kelvin4
0
Comment
Question by:Kelvin4
  • 3
  • 3
6 Comments
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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.
0
 

Author Comment

by:Kelvin4
Comment Utility
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">
<tr>
  <th>Header</th>
  <td>Item A</td>
</tr>
<tr>
  <th rowspan="2">Rectangle shape here</th>
  <td>Item B</td>
</tr>
<tr>
  <td>Item C</td>
</tr>
</table>

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?"
Answers:
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
Cheers,
Kelvin
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 500 total points
Comment Utility
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.
http://css-tricks.com/40-using-divs-inside-tables/

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.
http://www.w3schools.com/css/css_id_class.asp

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.
http://www.w3schools.com/css/css_padding.asp

Info for margins:
http://www.w3schools.com/css/css_margin.asp

This should assist in using positioning:
http://www.w3schools.com/css/css_positioning.asp
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 

Author Closing Comment

by:Kelvin4
Comment Utility
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
Kelvin
0
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
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.
0
 

Author Comment

by:Kelvin4
Comment Utility
Thanks:
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...
Kelvin
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now