how to use tables with bootstrap grid-system

Question

my goal is to show 4 tables that will be close to each other and not beneath each other like this:

table 1 , table 2, table 3, table 4

i have tried to implement the grid-system with a "row" as the bootstrap's API says but for some how my result is shown like this:

table1
table2
table3
table4

this is my code: (it has only 2 tables but still the same bad result):

<div class="row">
  <div class="span4"> 
    <table class="table table-condensed table-bordered">
    <tr>
      <th>Hour</th>
      <th>Player 1</th>
      <th>Player 2</th>
    </tr>
    <tr ng-repeat="court in courts">
      <td>{{court.id}}</td>
      <td>{{court.hour}}</td>
      <td>{{court.date}}</td>
    </tr> 
  </div>
  <div class="span4">
    <table class="table table-condensed table-bordered">
    <tr>
      <th>Hour</th>
      <th>Player 1</th>
      <th>Player 2</th>
    </tr>
    <tr ng-repeat="court in courts">
      <td>{{court.id}}</td>
      <td>{{court.hour}}</td>
      <td>{{court.date}}</td>
    </tr>  
  </div>
</div>

please help me...

Answer 1

Here's the general idea with 2 tables...

<!--// put it in a container //-->
<div class="container">
  <div class="row">
    <div class="span4">
      <table class="table table-condensed table-bordered">
        <tr>
          <th>Hour</th>
          <th>Player 1</th>
          <th>Player 2</th>
        </tr>
        <tr ng-repeat="court in courts">
          <td>{{court.id}}</td>
          <td>{{court.hour}}</td>
          <td>{{court.date}}</td>
        </tr>
        <!--// close your tables //-->
      </table>
    </div>
    <div class="span4">
      <table class="table table-condensed table-bordered">
        <tr>
          <th>Hour</th>
          <th>Player 1</th>
          <th>Player 2</th>
        </tr>
        <tr ng-repeat="court in courts">
          <td>{{court.id}}</td>
          <td>{{court.hour}}</td>
          <td>{{court.date}}</td>
        </tr>

      </table>
    </div>
  </div>
</div>

Demo