CODEWITHSUNDEEP
htmlhtml-table
user1942505
user1942505

Reputation: 520

HTML how to align two tables in one row?

How to align two tables in one row, in the middle of the page? The results that I want to see:

                                11 12   11 12
                                21 22   21 22

The result that I get:

11 12
21 22
11 12
21 22

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
  </tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
  </tr>
</table>

Upvotes: 5

Views: 49886

Answers (3)

user1954395
user1954395

Reputation: 112

Please use this, adjust the width as per the requirement and if you want to place at the center of the document the take a div and align it center of the page and place the following html in it.

<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left">
<tbody>
<tr>
  <td> 11</td>
  <td> 12</td>
</tr>
<tr>
  <td> 21</td>
  <td> 22</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="width:50%;float:left">
<tbody>
 <tr>
  <td> 11</td>
  <td> 12</td>
</tr>
<tr>
  <td> 21</td>
  <td> 22</td>
</tr>
</tbody>
</table>

Upvotes: 3

gwt
gwt

Reputation: 2423

You can create another table and embed these two tables in that : 

<table border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td>
    <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>11</td>
            <td>12</td>
          </tr>
          <tr>
            <td>21</td>
            <td>22</td>
          </tr>
    </table>    
 </td>
 <td>
    <table border="0" cellspacing="0" cellpadding="0">
       <tr>
            <td>11</td>
            <td>12</td>
       </tr>
       <tr>
            <td>21</td>
            <td>22</td>
       </tr>
     </table>
 </td>
 </tr>
</table>

or you can use the float property in css .

Upvotes: 2

Mihai Matei
Mihai Matei

Reputation: 24276

This http://jsfiddle.net/pNH3T/ is one possible solution:

<div style="display:block; width:100%">
  <div style="margin:0 auto; width:200px;">
    <table border="0" cellspacing="0" cellpadding="0" style="float:left; margin-right:10px;">
      <tr>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
      </tr>
    </table>
    <table border="0" cellspacing="0" cellpadding="0" style="float:left">
      <tr>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>21</td>
        <td>22</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: -1

Related Questions