title: Draw (tree) diagram in HTML
body: <p>I want to have a diagram in a web page, that looks something like this (from <a href="http://en.wikipedia.org/wiki/UEFA_Euro_2012#Knockout_stage" rel="nofollow noreferrer">wikipedia</a>):</p>
  
  <p><img src="https://i.stack.imgur.com/3ytYe.png" alt="enter image description here"></p>
  
  <p>(the details don't matter too much - it mustn't be a binary tree, and not necessarily with 3 levels)</p>
  
  <p>I currently use a (pre-calculated) table for which most of the borders are transparent, but this is ugly programming, and difficult to maintain. How would I draw such a diagram programatically? I don't want to use a <code>canvas</code>because I need to put <code>html</code> elements in the boxes, mainly drop-down lists and links.</p>
  
  <p>I was thinking of positioning the boxes manually through <code>CSS</code>, and drawing the lines with elements like the following (for an horizontal line):</p>
  
  <pre><code>&lt;p style="border: 2px solid black; height: 0px; width: ...;  top:...; right:...;"/&gt;
  </code></pre>
  
  <p>Is this the way to go? Is there a less ad-hocway of drawing lines? </p>