How do I make an HTML table inline

Question

In HTML I want to display a small table as part of a paragraph. One way to do that is this:

<table>
  <tr>
    <td>
      Before 
      <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
      After
    </td>
  </tr>
</table>

which produces this nice layout:

       a b
Before     After
       c d

which is exactly what I want.

But it seems rather silly to me to use a table inside a table when what I really want is to use a table inside a paragraph. However, if I try using this HTML:

<p>
  Before 
    <table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

I get this ugly layout:

Before
a b
    After
c d

I've tried using various different display styles, but none seem to do what I want.

Am I forced to use the table-within-table code, or am I missing something?

Answer 1

You could use the following css:

display:inline-table 

onnly IE7 and below don't support this property. Probably wrapping the table in a span with zoom:1 applied to it could help IE7.

Answer 2

I'm using Chrome browser on Linux and I am able to get this to work by adding display:inline-table to both the paragraph (p) and table tags:

<p style="display:inline-table;">
  Before
  <table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
  After
</p>

Just checked Firefox on Linux and it seems to work there too.

FYI: Removing either of the two display:inline-table styles gave undesirable formatting.