I am trying to create the table in the picture. But I am not really successful with this and I couldn't understand the logic.
My html code:
<table>
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td colspan="2">1</td>
<td>a2</td>
</tr>
</tbody>
</table>If you can help me with this, i would be really glad.
I use colspan to merge columns. And then I use a table in the table to make split a cell into 3 rows.
.table-inside {
margin-bottom: 0 !important;
}
.table-inside td {
padding: 0;
}
.table td {
text-align: center;
}<table class="table table-bordered">
<tbody>
<tr>
<td colspan="3">X</td>
</tr>
<tr>
<td colspan="3">X</td>
</tr>
<tr>
<td>Tarih</td>
<td>X</td>
<td rowspan="2" class="p-0">
<table class="table table-bordered table-inside">
<tbody>
<tr>
<td>T</td>
</tr>
<tr>
<td>T</td>
</tr>
<tr>
<td>T</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Saat</td>
<td>X</td>
</tr>
<tr>
<td colspan="3">X</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">CSS -
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid #000;
padding: 1rem;
}
.border-top-hide {
border-top: 0;
}
.border-bottom-hide {
border-bottom: 0;
}
HTML -
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="2">Tarih</td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td class="border-bottom-hide"></td>
</tr>
<tr>
<td rowspan="2">Saat</td>
<td rowspan="2"></td>
<td class="border-top-hide"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
