Tabella html tr all'interno di td

98

Sto cercando di creare una tabella in HTML. Devo creare il seguente design. Avevo aggiunto un <tr>interno al <td>ma in qualche modo il tavolo non è stato creato secondo il design.

inserisci qui la descrizione dell'immagine

Qualcuno può suggerirmi come posso raggiungere questo obiettivo?

Non riesco a creare Name1 | Prezzo1 sezioni.

html  html-table 
— Scorpione
fonte

Risposte:

162

Devi aggiungere una tabella completa all'interno di td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
Espandi lo snippet

— herrhansen
fonte
1
È possibile aggiungere una tabella completa all'interno di un td? Non l'ho mai fatto, ecco perché lo chiedo. Se è davvero eccezionale
— Scorpion
2
puoi mettere quasi tutto in un td, solo html, corpo e testa non sono ammessi penso
— herrhansen
1
Sì, questo è esattamente ciò di cui avevo paura. Ho cercato su Google sperando che ci fosse un'altra via d'uscita
— Giacomo Tecya Pigani
Bene, per ora, non genera alcun errore quando metto tr s in td, infatti ho inserito molti tr s in alcuni td s perché la mia app esegue il rendering di matrici di oggetti all'interno di alcune proprietà e funziona su tutti i browser, (non so di IE, dato che non l'ho testato in IE), chiunque sia interessato può verificarlo - stackblitz.com/edit/angular-u7aman , Nota: è un'app Angular, non sono sicuro che Angular ci sia dietro comportamento.
— Hasintha Abeykoon
Anche se non genera un errore nel tuo browser, è falso e può generare errori in altri browser o circostanze Dovresti sempre provare a usare gli elementi HTML nell'uso previsto, come non usare elementi di blocco all'interno di elementi in linea
— herrhansen
39

Non puoi mettere tr all'interno di td. Puoi vedere il contenuto consentito dalla documentazione dei documenti Web di MDN su td. Le informazioni pertinenti si trovano nella sezione dei contenuti consentiti .

Un altro modo per ottenere ciò è utilizzare colspane rowspan. Controlla questo violino .

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>

E alcuni CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
— lavavrik
fonte
11
mettere una tabella all'interno di una tabella è totalmente valido, scrivi un semplice codice html dove inserisci una tabella all'interno del TD e incollala nel validatore w3: validator.w3.org/check Noterai che passerà. tutti gli errori sono relativi ai tag doctype e head mancanti.
— Malloc
mettere un elemento della tabella all'interno di tr in invalid mentre inserire una tabella all'interno di un td è valido..puoi convalidare su validator.w3.org/check
— Lucky
3
Penso che il significato inteso qui fosse che una tabella all'interno di una tabella è un approccio strano per lo scenario, poiché colspan& rowspansono intesi per risolvere questo problema.
— connorbode
6
Non sono sicuro del motivo per cui questa soluzione ottiene così tanti voti positivi. Il codice pubblicato è completamente opaco senza un browser, raggiungendo un obiettivo visivo a scapito della relazione logica che una tabella dovrebbe rappresentare. E, come notato da @Malloc, la sua prima frase è palesemente falsa.
— brianpck
20

Puoi risolvere senza annidare le tabelle.

<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>
Espandi lo snippet

— WalterV
fonte
6

Prova questo codice

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

Metti un'altra tabella all'interno dell'elemento td in questo modo .

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

Basta aggiungerne uno nuovo tablenel campo tddesiderato. Esempio: 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
fonte
4

Esempio completo: 

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

Puoi controllare questo basta usare la tabella all'interno di una tabella come questa

<!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
fonte
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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.