Как сделать таблицу HTML встроенной

В HTML я хочу отобразить небольшую таблицу как часть абзаца. Один из способов сделать это:

<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>

который создает этот красивый макет:

       a b
Before     After
       c d

что именно то, что я хочу.

Но мне кажется довольно глупым использовать таблицу внутри таблицы, когда я действительно хочу использовать таблицу внутри абзаца. Однако, если я попытаюсь использовать этот 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>

Я получаю этот уродливый макет:

Before
a b
    After
c d

Я пробовал использовать различные стили отображения, но никто не делает то, что я хочу.

Я вынужден использовать код table-in-table, или я что-то не хватает?

Ответ 1

Создание абзаца display: inline; работает для меня. Но, если у вас есть несколько абзацев, вам нужно будет добавить <br /> после каждого из них.

Ответ 2

Вы можете использовать следующий css:

display:inline-table

onlly IE7 и ниже не поддерживают это свойство. Вероятно, упаковка таблицы в диапазоне с zoom:1, примененной к ней, может помочь IE7.

Ответ 3

Я использую браузер Chrome в Linux, и я могу заставить его работать, добавив display:inline-table как в параграф (p), так и в теги таблицы:

<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>

Только что проверил Firefox в Linux и, похоже, там тоже работает.

FYI: Удаление одного из двух стилей display:inline-table дало нежелательное форматирование.

Ответ 4

Я полагаю, что у вас есть веская причина использовать таблицу вместо css. Вы можете получить эффект, используя одну таблицу.

<table>
  <tr>
    <td rowspan="2">Before</td>
    <td>a</td>
    <td>b</td>
    <td rowspan="2">After</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>