Sto provando a creare una tabella in HTML. Ho il seguente design da creare. Ho aggiunto uno <tr> all'interno dello <td> ma in qualche modo la tabella non è stata creata come da progetto.Html table tr inside td
Qualcuno mi può suggerire come posso raggiungere questo obiettivo?
Impossibile creare Name1 | Sezioni Price1.
è necessario aggiungere un tavolo pieno all'interno del TD
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>Basta aggiungere un nuovo table nel td che si desidera. 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>
La tabella di inserimento in tabella non è assolutamente valida. Inoltre, non è possibile inserire tr all'interno di td. È necessario utilizzare colspan e rowspan. Controlla questo fiddle.
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
}
mettendo la tabella nella tabella è totalmente valida, scrivi un semplice codice html dove inserisci una tabella all'interno del TD e la incolli nel validatore w3: http: //validator.w3. org/check Noterai che sarà passato. tutti gli errori sono correlati al tag doctype e alla testina mancante. – Malloc
mettere un elemento di tabella dentro tr non valido mentre si inserisce una tabella all'interno di un td è valido..si può convalidare su https://validator.w3.org/check – Lucky
Penso che il significato inteso qui fosse che un tavolo all'interno di un tavolo è un approccio strano per lo scenario, dato che 'colspan' e' rowspan' sono pensati per risolvere questo problema. – connorbode
Mettere un altro tavolo all'interno dell'elemento td come this.
<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>
completa Esempio:
<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>
provare 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>
È possibile risolvere senza tabelle di nidificazione.
<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><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>
E 'possibile aggiungere tavolo pieno all'interno di un td ?? Non l'ho mai fatto, è per questo che lo sto chiedendo. Se è proprio il suo ottimo – Scorpion
puoi mettere quasi tutto in un td, solo l'html, il corpo e la testa non sono ammessi, penso che sia – quidage
Sì, questo è esattamente ciò di cui avevo paura. Ho cercato su google sperando che ci fosse un'altra via d'uscita –