Two HTML tables side by side centered on the page

Question

I have two tables on a page that I want to display side by side  and then center them within the page  actually within another div  but this is the simplest I could come up with     lt style gt     outer   text-align  center       inner   text-align  left  margin  0 auto       t   float  left      table   border  1px solid black       clearit   clear  left     lt  style gt    lt div id  outer  gt     lt p gt Two tables  side by side  centered together within the page  lt  p gt      lt div id  inner  gt       lt div class  t  gt         lt table gt           lt tr gt  lt th gt a lt  th gt  lt th gt b lt  th gt  lt  tr gt           lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt           lt tr gt  lt td gt 4 lt  td gt  lt td gt 9 lt  td gt  lt  tr gt           lt tr gt  lt td gt 16 lt  td gt  lt td gt 25 lt  td gt  lt  tr gt         lt  table gt       lt  div gt        lt div class  t  gt         lt table gt           lt tr gt  lt th gt a lt  th gt  lt th gt b lt  th gt  lt th gt c lt  th gt  lt  tr gt           lt tr gt  lt td gt 1 lt  td gt  lt td gt 2 lt  td gt  lt td gt 2 lt  td gt  lt  tr gt           lt tr gt  lt td gt 3 lt  td gt  lt td gt 5 lt  td gt  lt td gt 15 lt  td gt  lt  tr gt           lt tr gt  lt td gt 8 lt  td gt  lt td gt 13 lt  td gt  lt td gt 104 lt  td gt  lt  tr gt         lt  table gt       lt  div gt      lt  div gt     lt div id  clearit  gt all done  lt  div gt   lt  div gt    I understand that it s something to do with the fact that the tables are floated  but I m at a loss as to understand what I m missing  There are many web pages that describe something like the technique I show here  but in any event it doesn t work  the tables cling stubbornly to the left hand margin

User · Answer

If it was me - I would do with the table something like this:

_x000D_

<style type="text/css" media="screen">_x000D_
  table {_x000D_
    border: 1px solid black;_x000D_
    float: left;_x000D_
    width: 148px;_x000D_
  }_x000D_
  _x000D_
  #table_container {_x000D_
    width: 300px;_x000D_
    margin: 0 auto;_x000D_
  }_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>

_x000D_

User · Answer

Give your inner div a width   EXAMPLE  Change your CSS    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto     t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt    To this    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto  width 500px    t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt

User · Answer

The problem is that you need to give  inner a set width  anything but auto or inherit   The margin  0 auto  trick only works if the inner element is narrower than its container element  Without being given a width   inner is automatically expanding to the full width of  outer  which causes its contents to be flush left

User · Answer

The problem is that the DIV that should center your tables has no width defined  By default  DIVs are block elements and take up the entire width of their parent - in this case the entire document  propagating through the  outer DIV   so the automatic margin style has no effect   For this technique to work  you simply have to set the width of the div that has margin auto to anything but  auto  or  inherit   either a fixed pixel value or a percentage

User · Answer

I realize this is an ancient question  but here goes anyway   The following will work in compliant browsers and IE8 in standards mode  i e  with a doctype set     inner  text-align center    t  display inline-block     Unfortunately  there s really no way to tweak it to work in IE6  For IE7  adding a zoom 1 to the  t divs  via a conditional comment  might help  but I don t have IE7 available for testing at the moment

User · Answer

I realize this is an ancient question  but here goes anyway   The following will work in compliant browsers and IE8 in standards mode  i e  with a doctype set     inner  text-align center    t  display inline-block     Unfortunately  there s really no way to tweak it to work in IE6  For IE7  adding a zoom 1 to the  t divs  via a conditional comment  might help  but I don t have IE7 available for testing at the moment

User · Answer

Off the top of my head  you might try using the  margin  0 auto  for  outer rather than  inner   I often add background-color to my DIVs to see how they re laying out on the view   That might be a good way to diagnose what s going onn here

User · Answer

I found I could solve this by simply putting the two side by side tables inside of a third table that was centered  Here is the code  I added two lines of code at the top and bottom of the two existing tables   x000D   x000D   lt style gt  x000D     outer   x000D      text-align  center  x000D      x000D     x000D     inner   x000D      text-align  left  x000D      margin  0 auto  x000D      x000D     x000D     t   x000D      float  left  x000D      x000D     x000D    table   x000D      border  1px solid black  x000D      x000D     x000D     clearit   x000D      clear  left  x000D      x000D   lt  style gt  x000D   x000D   lt div id  outer  gt  x000D   x000D     lt p gt Two tables  side by side  centered together within the page  lt  p gt  x000D   x000D     lt div id  inner  gt  x000D       lt table style  margin-left  auto  margin-right  auto   gt  x000D         lt td gt  x000D           lt div class  t  gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt th gt a lt  th gt  x000D                 lt th gt b lt  th gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 1 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 4 lt  td gt  x000D                 lt td gt 9 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 16 lt  td gt  x000D                 lt td gt 25 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D   x000D           lt div class  t  gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt th gt a lt  th gt  x000D                 lt th gt b lt  th gt  x000D                 lt th gt c lt  th gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 1 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 3 lt  td gt  x000D                 lt td gt 5 lt  td gt  x000D                 lt td gt 15 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 8 lt  td gt  x000D                 lt td gt 13 lt  td gt  x000D                 lt td gt 104 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  td gt  x000D       lt  table gt  x000D     lt  div gt  x000D     lt div id  clearit  gt all done  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Give your inner div a width   EXAMPLE  Change your CSS    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto     t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt    To this    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto  width 500px    t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt

User · Answer

lt style gt   outer   text-align  center     inner   width 500px  text-align  left  margin  0 auto     t   float  left  width 240px  border  1px solid black    clearit   clear  both     lt  style gt

User · Answer

Unfortunately  all of these solutions rely on specifying a fixed width  Since the tables are generated dynamically  statistical results pulled from a database   the width can not be known in advance   The desired result can be achieved by wrapping the two tables within another table    lt table align  center  gt  lt tr gt  lt td gt    code for table on the left  lt  td gt  lt td gt    code for table on the right  lt  td gt  lt  tr gt  lt  table gt    and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page  re sizes  and the align  center  table attribute could be hoisted out into an outer div with margin autos    I conclude that there are some layouts that can only be achieved with tables

User · Answer

The problem is that you need to give  inner a set width  anything but auto or inherit   The margin  0 auto  trick only works if the inner element is narrower than its container element  Without being given a width   inner is automatically expanding to the full width of  outer  which causes its contents to be flush left

User · Answer

The problem is that the DIV that should center your tables has no width defined  By default  DIVs are block elements and take up the entire width of their parent - in this case the entire document  propagating through the  outer DIV   so the automatic margin style has no effect   For this technique to work  you simply have to set the width of the div that has margin auto to anything but  auto  or  inherit   either a fixed pixel value or a percentage

User · Answer

The problem is that the DIV that should center your tables has no width defined  By default  DIVs are block elements and take up the entire width of their parent - in this case the entire document  propagating through the  outer DIV   so the automatic margin style has no effect   For this technique to work  you simply have to set the width of the div that has margin auto to anything but  auto  or  inherit   either a fixed pixel value or a percentage

User · Answer

Give your inner div a width   EXAMPLE  Change your CSS    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto     t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt    To this    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto  width 500px    t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt

User · Answer

I have provided two solutions  Pick up which one best suits for you    Solution 1    x000D   x000D   lt html gt  x000D   lt style gt  x000D   container   x000D  width  50   x000D  margin  auto  x000D  text-align  center  x000D    x000D   first   x000D  width 48   x000D  float  left  x000D  height  200px  x000D  background-color  blue  x000D    x000D   second   x000D  width  48   x000D  float  left  x000D  height  200px  x000D  background-color  green  x000D    x000D   clear   x000D  clear  both  x000D    x000D   space  x000D  width  4   x000D  float  left  x000D  height  200px  x000D    x000D  table  x000D  border  1px solid black  x000D  margin  0 auto  x000D  table-layout fixed  x000D  width 100   x000D  text-align center  x000D    x000D   lt  style gt  x000D   lt body gt  x000D   x000D   lt div id    container   gt  x000D   lt div id  first  gt  x000D       lt table gt  x000D           lt tr gt  x000D               lt th gt Column1 lt  th gt  x000D               lt th gt Column2 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Value1 lt  td gt  x000D               lt td gt Value2 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   lt div id    space   gt  x000D   lt  div gt  x000D   lt div id    second   gt  x000D   lt table gt  x000D       lt tr gt  x000D           lt th gt Column1 lt  th gt  x000D           lt th gt Column2 lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Value1 lt  td gt  x000D           lt td gt Value2 lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   lt div id    clear   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Solution 2    x000D   x000D   lt html gt  x000D   lt style gt  x000D   container   x000D  margin 0 auto  x000D  text-align  center  x000D    x000D   first   x000D  float  left  x000D    x000D   second   x000D  float  left  x000D    x000D   clear   x000D  clear  both  x000D    x000D   space  x000D  width 20px  x000D  height 20px  x000D  float  left  x000D    x000D   table   table th   table td  x000D  border  1px solid black  x000D    x000D   lt  style gt  x000D   lt body gt  x000D   x000D   lt table id    container   gt  x000D   lt td gt  x000D   lt div id  first  gt  x000D       lt table class  table  gt  x000D           lt tr gt  x000D               lt th gt Column1 lt  th gt  x000D               lt th gt Column2 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Value1 lt  td gt  x000D               lt td gt Value2 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   lt div id    space   gt  x000D   lt  div gt  x000D   lt div id    second   gt  x000D   lt table class  table  gt  x000D       lt tr gt  x000D           lt th gt Column1 lt  th gt  x000D           lt th gt Column2 lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Value1 lt  td gt  x000D           lt td gt Value2 lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   lt div id    clear   gt  lt  div gt  x000D   lt  div gt  x000D   lt  td gt  x000D   lt  table gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Note  Change the width percentage as per your need in 1st solution

User · Answer

Give your inner div a width   EXAMPLE  Change your CSS    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto     t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt    To this    lt style gt   outer   text-align  center     inner   text-align  left  margin  0 auto  width 500px    t   float  left    table   border  1px solid black     clearit   clear  left     lt  style gt

User · Answer

If it was me - I would do with the table something like this:

_x000D_

<style type="text/css" media="screen">_x000D_
  table {_x000D_
    border: 1px solid black;_x000D_
    float: left;_x000D_
    width: 148px;_x000D_
  }_x000D_
  _x000D_
  #table_container {_x000D_
    width: 300px;_x000D_
    margin: 0 auto;_x000D_
  }_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>

_x000D_

User · Answer

Unfortunately  all of these solutions rely on specifying a fixed width  Since the tables are generated dynamically  statistical results pulled from a database   the width can not be known in advance   The desired result can be achieved by wrapping the two tables within another table    lt table align  center  gt  lt tr gt  lt td gt    code for table on the left  lt  td gt  lt td gt    code for table on the right  lt  td gt  lt  tr gt  lt  table gt    and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page  re sizes  and the align  center  table attribute could be hoisted out into an outer div with margin autos    I conclude that there are some layouts that can only be achieved with tables

User · Answer

The problem is that you need to give  inner a set width  anything but auto or inherit   The margin  0 auto  trick only works if the inner element is narrower than its container element  Without being given a width   inner is automatically expanding to the full width of  outer  which causes its contents to be flush left

User · Answer

Off the top of my head  you might try using the  margin  0 auto  for  outer rather than  inner   I often add background-color to my DIVs to see how they re laying out on the view   That might be a good way to diagnose what s going onn here

User · Answer

If it was me - I would do with the table something like this:

_x000D_

<style type="text/css" media="screen">_x000D_
  table {_x000D_
    border: 1px solid black;_x000D_
    float: left;_x000D_
    width: 148px;_x000D_
  }_x000D_
  _x000D_
  #table_container {_x000D_
    width: 300px;_x000D_
    margin: 0 auto;_x000D_
  }_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>

_x000D_

User · Answer

Unfortunately  all of these solutions rely on specifying a fixed width  Since the tables are generated dynamically  statistical results pulled from a database   the width can not be known in advance   The desired result can be achieved by wrapping the two tables within another table    lt table align  center  gt  lt tr gt  lt td gt    code for table on the left  lt  td gt  lt td gt    code for table on the right  lt  td gt  lt  tr gt  lt  table gt    and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page  re sizes  and the align  center  table attribute could be hoisted out into an outer div with margin autos    I conclude that there are some layouts that can only be achieved with tables

User · Answer

Off the top of my head  you might try using the  margin  0 auto  for  outer rather than  inner   I often add background-color to my DIVs to see how they re laying out on the view   That might be a good way to diagnose what s going onn here

User · Answer

Off the top of my head  you might try using the  margin  0 auto  for  outer rather than  inner   I often add background-color to my DIVs to see how they re laying out on the view   That might be a good way to diagnose what s going onn here

User · Answer

lt style gt   outer   text-align  center     inner   width 500px  text-align  left  margin  0 auto     t   float  left  width 240px  border  1px solid black    clearit   clear  both     lt  style gt

User · Answer

lt style gt   outer   text-align  center     inner   width 500px  text-align  left  margin  0 auto     t   float  left  width 240px  border  1px solid black    clearit   clear  both     lt  style gt

User · Answer

The problem is that the DIV that should center your tables has no width defined  By default  DIVs are block elements and take up the entire width of their parent - in this case the entire document  propagating through the  outer DIV   so the automatic margin style has no effect   For this technique to work  you simply have to set the width of the div that has margin auto to anything but  auto  or  inherit   either a fixed pixel value or a percentage

User · Answer

lt style gt   outer   text-align  center     inner   width 500px  text-align  left  margin  0 auto     t   float  left  width 240px  border  1px solid black    clearit   clear  both     lt  style gt

User · Answer

I found I could solve this by simply putting the two side by side tables inside of a third table that was centered  Here is the code  I added two lines of code at the top and bottom of the two existing tables   x000D   x000D   lt style gt  x000D     outer   x000D      text-align  center  x000D      x000D     x000D     inner   x000D      text-align  left  x000D      margin  0 auto  x000D      x000D     x000D     t   x000D      float  left  x000D      x000D     x000D    table   x000D      border  1px solid black  x000D      x000D     x000D     clearit   x000D      clear  left  x000D      x000D   lt  style gt  x000D   x000D   lt div id  outer  gt  x000D   x000D     lt p gt Two tables  side by side  centered together within the page  lt  p gt  x000D   x000D     lt div id  inner  gt  x000D       lt table style  margin-left  auto  margin-right  auto   gt  x000D         lt td gt  x000D           lt div class  t  gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt th gt a lt  th gt  x000D                 lt th gt b lt  th gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 1 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 4 lt  td gt  x000D                 lt td gt 9 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 16 lt  td gt  x000D                 lt td gt 25 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D   x000D           lt div class  t  gt  x000D             lt table gt  x000D               lt tr gt  x000D                 lt th gt a lt  th gt  x000D                 lt th gt b lt  th gt  x000D                 lt th gt c lt  th gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 1 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D                 lt td gt 2 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 3 lt  td gt  x000D                 lt td gt 5 lt  td gt  x000D                 lt td gt 15 lt  td gt  x000D               lt  tr gt  x000D               lt tr gt  x000D                 lt td gt 8 lt  td gt  x000D                 lt td gt 13 lt  td gt  x000D                 lt td gt 104 lt  td gt  x000D               lt  tr gt  x000D             lt  table gt  x000D           lt  div gt  x000D         lt  td gt  x000D       lt  table gt  x000D     lt  div gt  x000D     lt div id  clearit  gt all done  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Unfortunately  all of these solutions rely on specifying a fixed width  Since the tables are generated dynamically  statistical results pulled from a database   the width can not be known in advance   The desired result can be achieved by wrapping the two tables within another table    lt table align  center  gt  lt tr gt  lt td gt    code for table on the left  lt  td gt  lt td gt    code for table on the right  lt  td gt  lt  tr gt  lt  table gt    and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page  re sizes  and the align  center  table attribute could be hoisted out into an outer div with margin autos    I conclude that there are some layouts that can only be achieved with tables

User · Answer

I have provided two solutions  Pick up which one best suits for you    Solution 1    x000D   x000D   lt html gt  x000D   lt style gt  x000D   container   x000D  width  50   x000D  margin  auto  x000D  text-align  center  x000D    x000D   first   x000D  width 48   x000D  float  left  x000D  height  200px  x000D  background-color  blue  x000D    x000D   second   x000D  width  48   x000D  float  left  x000D  height  200px  x000D  background-color  green  x000D    x000D   clear   x000D  clear  both  x000D    x000D   space  x000D  width  4   x000D  float  left  x000D  height  200px  x000D    x000D  table  x000D  border  1px solid black  x000D  margin  0 auto  x000D  table-layout fixed  x000D  width 100   x000D  text-align center  x000D    x000D   lt  style gt  x000D   lt body gt  x000D   x000D   lt div id    container   gt  x000D   lt div id  first  gt  x000D       lt table gt  x000D           lt tr gt  x000D               lt th gt Column1 lt  th gt  x000D               lt th gt Column2 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Value1 lt  td gt  x000D               lt td gt Value2 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   lt div id    space   gt  x000D   lt  div gt  x000D   lt div id    second   gt  x000D   lt table gt  x000D       lt tr gt  x000D           lt th gt Column1 lt  th gt  x000D           lt th gt Column2 lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Value1 lt  td gt  x000D           lt td gt Value2 lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   lt div id    clear   gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Solution 2    x000D   x000D   lt html gt  x000D   lt style gt  x000D   container   x000D  margin 0 auto  x000D  text-align  center  x000D    x000D   first   x000D  float  left  x000D    x000D   second   x000D  float  left  x000D    x000D   clear   x000D  clear  both  x000D    x000D   space  x000D  width 20px  x000D  height 20px  x000D  float  left  x000D    x000D   table   table th   table td  x000D  border  1px solid black  x000D    x000D   lt  style gt  x000D   lt body gt  x000D   x000D   lt table id    container   gt  x000D   lt td gt  x000D   lt div id  first  gt  x000D       lt table class  table  gt  x000D           lt tr gt  x000D               lt th gt Column1 lt  th gt  x000D               lt th gt Column2 lt  th gt  x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Value1 lt  td gt  x000D               lt td gt Value2 lt  td gt  x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   lt div id    space   gt  x000D   lt  div gt  x000D   lt div id    second   gt  x000D   lt table class  table  gt  x000D       lt tr gt  x000D           lt th gt Column1 lt  th gt  x000D           lt th gt Column2 lt  th gt  x000D       lt  tr gt  x000D       lt tr gt  x000D           lt td gt Value1 lt  td gt  x000D           lt td gt Value2 lt  td gt  x000D       lt  tr gt  x000D   lt  table gt  x000D   lt  div gt  x000D   lt div id    clear   gt  lt  div gt  x000D   lt  div gt  x000D   lt  td gt  x000D   lt  table gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Note  Change the width percentage as per your need in 1st solution

User · Answer

If it was me - I would do with the table something like this:

_x000D_

<style type="text/css" media="screen">_x000D_
  table {_x000D_
    border: 1px solid black;_x000D_
    float: left;_x000D_
    width: 148px;_x000D_
  }_x000D_
  _x000D_
  #table_container {_x000D_
    width: 300px;_x000D_
    margin: 0 auto;_x000D_
  }_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
  <table>_x000D_
    <tr>_x000D_
      <th>a</th>_x000D_
      <th>b</th>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>1</td>_x000D_
      <td>2</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>4</td>_x000D_
      <td>9</td>_x000D_
    </tr>_x000D_
    <tr>_x000D_
      <td>16</td>_x000D_
      <td>25</td>_x000D_
    </tr>_x000D_
  </table>_x000D_
</div>

_x000D_

User · Answer

The problem is that you need to give  inner a set width  anything but auto or inherit   The margin  0 auto  trick only works if the inner element is narrower than its container element  Without being given a width   inner is automatically expanding to the full width of  outer  which causes its contents to be flush left

[css] Two HTML tables side by side, centered on the page

Examples related to css

Examples related to center

Examples related to alignment