Table inside a table HTML - html

Question

I am have my HTML that have a table inside odd two
I want this
but I have this
How can I do the table td with the same ?
This is my code in HTML:
<table>
<thead class='thead-dark'>
<tr>
<th>Semestre</th>
<th>Curso</th>
<th>Seccion</th>
</tr>
</thead>
<tbody>
{% for item in results%}
<tr>
<td>{{item.year}}</td>
<td><table class="table table-striped table-hover">
{% if item.A!= ""%}
<tr><td><p>A.1</p></td></tr>
{%endif%}
{% if item.B != ""%}
<tr><td><p>B.1</p></td></tr>
{%endif%}
</tr></table></td>
<td><table>
{% if item.A != ""%}
<tr><td><p>{{item.A|linebreaks}}</p></td></tr>
{%endif%}
{% if item.B != ""%}
<tr><td><p>{{item.B|linebreaks}}</p></td></tr>
{%endif%}
</tr></table></td>
</tr>
</tbody>
</table>

Answer 1

You don't have to nest a second table in it. Using "rowspan" as #Brian Tomspett suggested will do the trick.
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<td>Item1</td>
<td>Item2</td>
<td>Item3</td>
</tr>
<tr>
<td rowspan="6">A</td>
<td rowspan="2">A.1</td>
<td>A.1.1</td>
</tr>
<tr>
<td>A.1.2</td>
</tr>
<tr>
<td rowspan="2">A.2</td>
<td>A.2.1</td>
</tr>
<tr>
<td>A.2.2</td>
</tr>
<tr>
<td rowspan="2">A.2</td>
<td>A.3.1</td>
</tr>
<tr>
<td>A.3.2</td>
</tr>
<!--continue the pattern here-->
</tbody>
</table>