How can i achieve a table like this? - html

Question

I tried using boxed elements but it is not coming in a proper way!
Any kind of help is highly appreciated
https://codepen.io/saisree/pen/EXXQGO - link to codepen
<table>
<tr>
<td class="text-center" colspan="4">Aircraft Status Display</td>
</tr>
<tr>
<td> spare</br>STBY</td><td><div class="vr"></div>
</td>
</tr>
<tr>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
</table>

Answer 1

Using colspan=n to make a column the width of n columns:
<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

Answer 2

It's not completely clear from your image what you are trying to achieve, but if you mean the "half-open" cells, here is an example.
It uses col-spans to merge several cells into one, and different border settings: First a default setting for all cells (for borders on each side), the therse are overwritten by additional CSS rules that have special CSS selectors (with pseudo classes) to only affect certain cells:
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #333;
height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>