title: One or two tables centered in a div
body: <p>I'm trying to display divs with either one or two tables next to each other. The tables should be centered:</p>
  
  <pre>
  *div****************************************************************************
  *                                      Table 1                                 *
  *                                   |...|...|...|                              *
  ********************************************************************************
  *div****************************************************************************
  *                    Table 2                             Table 3               *
  *                 |...|...|...|                       |...|...|...|            *
  ********************************************************************************
  </pre>
  
  <p>My html looks something like this:</p>
  
  <pre><code>&lt;div class="all"&gt;
    &lt;div class="row"&gt; &lt;!-- row with 1 table in it --&gt;
      &lt;div class="column"&gt;
        &lt;table class="centered"&gt;
            ...
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt; &lt;!-- row with 2 tables in it --&gt;
      &lt;div class="column"&gt;
        &lt;table class="centered"&gt;
            ...
        &lt;/table&gt;
      &lt;/div&gt;
      &lt;div class="column"&gt;
        &lt;table class="centered"&gt;
            ...
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have so far failed to find the proper CSS for it. My current CSS looks like this:</p>
  
  <pre><code>div.row {
    display: block;
    width: 100%;
  }
  
  div.column {
    display: inline;
    margin-left: auto;
    margin-right: auto;
  }
  
  table.centered {
    border: 1px;
    border-style: solid;
    margin: 20px;
  }
  </code></pre>
  
  <p>jsfiddle is here: <a href="https://jsfiddle.net/k9w7yt0f/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>Please help me understand CSS...</p>