Table HTML tr dans td

98

J'essaye de créer un tableau en HTML. J'ai le design suivant à créer. J'avais ajouté un <tr>intérieur <td>mais la table n'est pas créée selon la conception.

entrez la description de l'image ici

Quelqu'un peut-il me suggérer comment je peux y parvenir?

Je ne parviens pas à créer Name1 | Prix1 sections.

html html-table Scorpion
la source

Réponses:

162

Vous devez ajouter une table complète dans le td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Développer l'extrait

Herrhansen
la source
1
Est-il possible d'ajouter une table complète dans un td ?? Je n'ai jamais fait ça, c'est pourquoi je demande ça. Si c'est vraiment génial
Scorpion
2
vous pouvez presque tout mettre dans un td, seuls le html, le corps et la tête ne sont pas autorisés je pense
herrhansen
1
Oui, c'est exactement ce dont j'avais peur. J'ai levé les yeux sur Google en espérant qu'il y avait une autre issue
Giacomo Tecya Pigani
Eh bien, pour le moment, cela ne génère aucune erreur lorsque je mets tr s dans td, en fait, j'en ai mis beaucoup dans certains td car mon application rend des tableaux d'objets dans certaines propriétés, et cela fonctionne sur tous les navigateurs, (je ne sais pas pour IE, car je ne l'ai pas testé dans IE), toute personne intéressée peut le vérifier - stackblitz.com/edit/angular-u7aman , Remarque: c'est une application Angular, pas sûr qu'Angular soit derrière cela comportement.
Hasintha Abeykoon le
Même si cela ne génère pas d'erreur dans votre navigateur, il est faux et peut générer des erreurs dans d'autres navigateurs ou circonstances.Vous devriez toujours essayer d'utiliser HTML-Elements dans leur utilisation prévue, comme ne pas utiliser block-Elements à l'intérieur de inline-Elements
herrhansen le
39

Vous ne pouvez pas mettre tr dans td. Vous pouvez voir le contenu autorisé dans la documentation de la documentation Web MDN sur td. Les informations pertinentes se trouvent dans la section du contenu autorisé .

Une autre façon d'y parvenir consiste à utiliser colspanet rowspan. Vérifiez ce violon .

HTML:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

Et quelques CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
Lavavrik
la source
11
mettre une table à l'intérieur d'une table est totalement valide, écrivez un simple code html où vous insérez une table à l'intérieur du TD et collez-la dans le validateur w3: validator.w3.org/check Vous remarquerez qu'il passera. toutes les erreurs sont liées aux balises doctype et head manquantes.
Malloc
mettre un élément de table à l'intérieur de tr in invalid tout en mettant une table à l'intérieur d'un td est valide..vous pouvez valider sur validator.w3.org/check
Chanceux
3
Je pense que la signification voulue ici était qu'une table à l'intérieur d'une table est une approche étrange pour le scénario, car colspan& rowspansont destinés à résoudre ce problème.
connorbode
6
Je ne sais pas pourquoi cette solution obtient autant de votes positifs. Le code affiché est totalement opaque sans navigateur, atteignant un objectif visuel au détriment de la relation logique qu'une table est censée représenter. Et, comme l'a noté @Malloc, sa première phrase est manifestement fausse.
brianpck
20

Vous pouvez résoudre sans imbriquer les tables.

<table border="1">
    <thead>
        <tr>
            <th>ABC</th>
            <th>ABC</th>
            <th colspan="2">ABC</th>
            <th>ABC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Item1</td>
            <td rowspan="4">Item1</td>
            <td colspan="2">Item1</td>
            <td rowspan="4">Item1</td>
        </tr>
        <tr>
            <td>Name1</td>
            <td>Price1</td>
        </tr>
        <tr>
            <td>Name2</td>
            <td>Price2</td>
        </tr>
        <tr>
            <td>Name3</td>
            <td>Price3</td>
        </tr>
        <tr>
            <td>Item2</td>
            <td>Item2</td>
            <td colspan="2">Item2</td>
            <td>Item2</td>
        </tr>
    </tbody>
</table>
Développer l'extrait

WalterV
la source
6

Essayez ce code

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>
Kedar1442
la source
4

Mettez une autre table dans l'élément td comme ceci .

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
Patrick
la source
4

Ajoutez simplement un nouveau tabledans le que tdvous voulez. Exemple: http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>
João C
la source
4

Exemple complet: 

<table border="1" style="width:100%;">
  <tr>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Item 1</td>
    <td>
      <table border="1" style="width: 100%;">
        <tr>
          <td>Name 1</td>
          <td>Price 1</td>
        </tr>
        <tr>
          <td>Name 2</td>
          <td>Price 2</td>
        </tr>
        <tr>
          <td>Name 3</td>
          <td>Price 3</td>
        </tr>
      </table>
    </td>
    <td>Item 1</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
    <td>Item 3</td>
  </tr>
</table>
Jagu
la source
2

Vous pouvez vérifier ceci simplement utiliser le tableau à l'intérieur du tableau comme celui-ci

<!DOCTYPE html>
<html>
  <head>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table style="width:100%">
      <tr>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
        <th>ABC</th>
      </tr>
      <tr>
        <td>Item1</td>
        <td>Item1</td>
        <td>
          <table style="width:100%">
            <tr>
              <td>name1</td>
              <td>price1</td>
            </tr>
            <tr>
              <td>name2</td>
              <td>price2</td>
            </tr>
            <tr>
              <td>name3</td>
              <td>price3</td>
            </tr>
          </table>
        </td>
        <td>item1</td>
      </tr>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
      </tr>
      <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
      </tr>
      <tr>
        <td>E</td>
        <td>R</td>
        <td>T</td>
        <td>T</td>
      </tr>
    </table>
  </body>
</html>
Arman H
la source
0 
<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>
Azizul Hakim
la source