Positioning two tables in HTML

Question

I'd like to add two tables in my web application:

<span><table><tr><td>A</td><td>B</td></tr></table></span>
<span><table><tr><td>C</td><td>B</td></tr></table></span>

I'd like that these two tables are positioning at the same row ie. horizontally,

How can I do this?

Why are you placing a block level element (`table`) inside an inline element (`span`). Or even, why are you placing a table in a span? Just curious — Marijke Luttekes, Sep 09 '13 at 10:50
did you have another version how to place two table horizontally? — Lamloumi Afif, Sep 09 '13 at 10:59
Well, you could just use CSS to change the `display` type of the tables or use `float`, there's absolutely no use to place the tables inside a `span`. (More discussion on block elements inside inline elements here -> http://stackoverflow.com/questions/746531/is-it-wrong-to-change-a-block-element-to-inline-with-css-if-it-contains-another) — Marijke Luttekes, Sep 09 '13 at 12:39

score 3 · Answer 1 · answered Sep 09 '13 at 10:39

3

Try this:

span{display: inline-table;}

or you could also do float: left; or display: inline-block;

and give width to your table.

see this demo

answered Sep 09 '13 at 10:39

score 1 · Answer 2 · answered Sep 09 '13 at 10:40

1

span{
   display:inline-block;
}

answered Sep 09 '13 at 10:40

Love Trivedi

score 1 · Accepted Answer · answered Sep 09 '13 at 10:42

1

For example:

<span class="table"><table><tr><td>A</td><td>B</td></tr></table></span>
<span class="table"><table><tr><td>C</td><td>B</td></tr></table></span>

And then the CSS:

.table{     
    float: left;
}

answered Sep 09 '13 at 10:42

Joum

3 Answers3