You cannot put tr inside td. You can see the allowed content from MDN web docs documentation about td .
A table can be created within another table by simply using the table tags like <table>, <tr>, <td>, etc., to create our nested table. Since nesting tables can lead to higher complexity levels, remember to begin and end the nesting tables within the same cell.
To create a nested table, we need to create a table using the <table> tag. This table is known as the outer table. The second table that will be nested table is called the inner table. This table is also created using the <table> tag but there is a special thing that must be kept in mind.
The <td> tag defines a standard data cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element)
You must add a full table inside the td
<table>
<tr>
<td>
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</td>
</tr>
</table>
You cannot put tr inside td. You can see the allowed content from MDN web docs documentation about td
. The relevant information is in the permitted content section.
Another way to achieve this is by using colspan
and rowspan
. Check this 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>
And some CSS:
table {
border-collapse: collapse
}
td {
border: 1px solid #000000
}
You can solve without nesting 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>
Full Example:
<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>
Try this 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>
Put another table inside the td element like 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>
Just add a new table
in the td
you want. Example: 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With