How to create a cup tree

i dont know how to create a cup tree with html and javascript. I have some columns for the rounds

Round 1 | Round 2 | Round 3 | Final

and than again three new columns for the matches

teamA
result
teamB


teamA
result
teamB


teamA
result
teamB

in te next columns the matches are less. I want to create the tree programmatic but i dont how to handle the different spaces between the macthes because in every round they are bigger. I dont know how to calculate that.

Does someone of you have an idea how to do that?

This is what i did until now

<div class="yui3-u-1-4 tourneyMatchColumn">
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="ma开发者_JS百科tchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
</div>

I think a <table> is perfectly fine to use in this case. Here's some basic markup and formatting to get you started.

Demo: jsfiddle.net/Marcel/Qz3cq

See Drawing a tournament bracket