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
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
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
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
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
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
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
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
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
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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.