How to make two horizontally aligned tables?

Question

Every time I create a HTML table, it starts on a new paragraph. Is it possible to override this behaviour, so that I have two tables on the same row?

I'm using also CSS.

score 4 · Answer 1 · answered Nov 02 '11 at 16:55

4

You'll want to style them, display: inline; or float both the tables.

answered Nov 02 '11 at 16:55

Nick Q.

3,947
2
23
37

score 2 · Accepted Answer · answered Nov 02 '11 at 17:03

2

I've always found it easier to just create a table that contains the 2 tables if i want them to always be on same row.

    <table>
       <tr>
         <td>
           <table id="table1">
             <tr>
               <td></td>
             </tr>
           </table>
         </td>
         <td>
           <table id="table2">
             <tr>
               <td></td>
             </tr>
           </table>
         </td>
       </tr>
     </table>

styling works too though.

answered Nov 02 '11 at 17:03

user1026049

44
2

this is the correct solution although `display:inline` will work too. – TheTechGuy Nov 02 '11 at 17:04
1

Then you're using table elements when you could be using styling, which is generally frowned upon. See [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – Nick Q. Nov 02 '11 at 17:55
Maybe this is for an email template, where tables is all you can use for layout. – Arnold.Krumins Nov 02 '17 at 09:42

score 0 · Answer 3 · answered Mar 30 '17 at 17:24

0

jsfiddle

If you need the horizontally aligned tables to fill 100% width, you need: display:inline-table; and float:left;

answered Mar 30 '17 at 17:24

55cc077

9
1
2

score 0 · Answer 4 · answered Nov 02 '11 at 17:01

0

set display: inline-block; for each table.

online demo: http://jsfiddle.net/bitsmix/s7Bec/

answered Nov 02 '11 at 17:01

Ya Zhuang

4,652
31
40

How to make two horizontally aligned tables?

4 Answers4