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

Question

В 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

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

Я вынужден использовать код таблицы в таблице или я что-то упустил?

Answer 1

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

display:inline-table

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

Answer 2

Я использую браузер 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, и, похоже, он там тоже работает.

К вашему сведению: удаление любого из двух стилей display:inline-table привело к нежелательному форматированию.

Answer 3

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

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