CODEWITHSUNDEEP
htmlcss
nullpointer
nullpointer

Reputation: 275

How can I float two tables next to each other left to right and center them both?

I have two tables, which I would like to position next to each other BUT want them to be on the center of the page.

I almost did it, I only have a problem how to align them on the center of the page. My example:

Demo

My HTML:

<table class="table_on_the_left">
    <tr><td>
        hello demo here 
        </td></tr></table>

<table class="table_on_the_right">
    <tr><td>
        hello demo here 2 
    </td></tr></table>

My CSS:

table.table_on_the_left {
    position:center;
    float:left;
   }

  table.table_on_the_right {
    position:center;
    float:right;
  }

Upvotes: 2

Views: 11891

Answers (2)

DaniP
DaniP

Reputation: 38252

You may want to use inline-block instead of float:

table.table_on_the_left, table.table_on_the_right {
  display:inline-block;
}

And to make the horizontal align text-align:center on the parent:

body {
  text-align:center;
}

Check this Demo

Here you can know more about inline-block

Aside a recommendation plus if you are trying to set the layout for your page avoid to use <table> save it only for tabular data and instead use <div> and positioning.

Upvotes: 5

Ruddy
Ruddy

Reputation: 9923

You can wrap them in a div and use that to make them sit next to eachother and center them.

HTML:

<div id="wrap">
    <table class="table_on_the_left">
        <tr>
            <td>hello demo here</td>
        </tr>
    </table>
    <table class="table_on_the_right">
        <tr>
            <td>hello demo here 2</td>
        </tr>
    </table>
</div>

CSS:

table.table_on_the_left {
    position:center;
    float:left;
}
table.table_on_the_right {
    position:center;
    float:right;
}
#wrap {
    width: 250px;
    margin: 0 auto;
}

DEMO HERE

Upvotes: 1

Related Questions