how to properly insert <div> with <tr> inside a table? - html

Question

I've searched online and I can't find an answer, so I'm going to ask this question.
The new data will always be formatted in the following and will be populated in id="content"
<tr>
<td>name</td>
<td>age</td>
<td>gender</td>
</tr>
I read you need to have <div> inside a <td> if you're going to put <div> inside a <table>. Right now, the format is not correct. All of the new data are in column one instead of each of them in each row.
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</div>
<td>
</table>

Answer 1

Update
re-reading your structure you most likely need
<table>
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
</thead>
<tbody id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</tbody>
</table>
Original answer
You can't have tr as direct children of a div.
You need to use a table
Either
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<table id="contents">
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
<td>
</table>
or
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<td>
<div id="contents">
<table>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
<td>
</table>

Answer 2

I think that you want the table to be inside the div completely, and all the new data be in a corresponding row, like this:
<div id="contents">
<table>
<tr>
<th>name</th>
<th>age</th>
<th>gender</th>
</tr>
<tr>
<td>John</td>
<td>12</td>
<td>male</td>
</tr>
<tr>
<td>Jess</td>
<td>13</td>
<td>female</td>
</tr>
</table>
</div>
Right now the format is wrong because of you are trying to add whole data into a single cell (<td> element) which isn't right way to do.