web-dev-qa-db-fra.com

Comment créer un tableau HTML en ligne

En HTML, je souhaite afficher un petit tableau dans le cadre d'un paragraphe. Une façon de faire est la suivante:

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

qui produit cette belle mise en page:

       a b
Before     After
       c d

qui est exactement ce que je veux.

Mais il me semble plutôt ridicule d’utiliser un tableau à l’intérieur d’un tableau alors que ce que je veux vraiment, c’est utiliser un tableau dans un paragraphe. Cependant, si j'essaie d'utiliser ce code 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>

Je reçois cette mise en page moche:

Before
a b
    After
c d

J'ai essayé d'utiliser différents styles d'affichage, mais aucun ne semble faire ce que je veux.

Suis-je obligé d'utiliser le code table-dans-table ou manque-t-il quelque chose?

htmlcsshtml-table
16
oz1cz

Faire le paragraphe display: inline; fonctionne pour moi. Mais si vous avez plusieurs paragraphes, vous devrez ajouter un <br /> après chacun d’eux.

3
Will

Vous pouvez utiliser le css suivant:

display:inline-table

seulement IE7 et ci-dessous ne supportent pas cette propriété. Envelopper probablement la table dans une étendue avec zoom:1 appliqué pourrait aider IE7.

25
Spadar Shut

J'utilise le navigateur Chrome sous Linux et je peux le faire en ajoutant display:inline-table aux balises paragraph (p) et table:

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

Je viens de vérifier Firefox sous Linux et cela semble fonctionner là aussi.

FYI: La suppression de l’un des deux styles display:inline-table donnait un formatage indésirable.

2
Doctor Jonesington

Je suppose que vous avez une bonne raison d’utiliser une table ici au lieu de css. Vous pouvez obtenir l'effet en utilisant une seule table.

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