Eu tenho duas tabelas em uma página que quero exibir lado a lado e, em seguida, centralizo-as na página (na verdade, dentro de outra div, mas é a mais simples que eu poderia criar):

<style>
  #outer { text-align: center; }
  #inner { text-align: left; margin: 0 auto; }
  .t { float: left; }
  table { border: 1px solid black; }
  #clearit { clear: left; }
</style>

<div id="outer">
  <p>Two tables, side by side, centered together within the page.</p>

  <div id="inner">
    <div class="t">
      <table>
        <tr><th>a</th><th>b</th></tr>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>4</td><td>9</td></tr>
        <tr><td>16</td><td>25</td></tr>
      </table>
    </div>

    <div class="t">
      <table>
        <tr><th>a</th><th>b</th><th>c</th></tr>
        <tr><td>1</td><td>2</td><td>2</td></tr>
        <tr><td>3</td><td>5</td><td>15</td></tr>
        <tr><td>8</td><td>13</td><td>104</td></tr>
      </table>
    </div>

  </div>
  <div id="clearit">all done.</div>
</div>

Entendo que isso tenha algo a ver com o fato de as mesas estarem flutuando, mas não consigo entender o que estou perdendo. Existem muitas páginas da web que descrevem algo como a técnica que mostro aqui, mas, de qualquer forma, não funciona; as mesas se apegam teimosamente à margem esquerda.