Im new to html. Can someone help me how to do this kind of table? Im really having a hard time for this one since it is so complex. I tried several things but it makes it worse. Thanks in advance.
Here is what I tried and the result is this.
I cant post the code since it restricts me to post too much code
CodePudding user response:
<table style="width:100%;">
<tr style="width:100%;height:30px;">
<td colspan="2" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td colspan="2" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td rowspan = "5" style="border:solid black; width:5px;"></td>
<td rowspan="5" style="border:solid black; width:15px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td colspan="4" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td colspan="2" style="border:solid black; width:20px;"></td>
<td colspan="3" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td colspan="2" style="border:solid black; width:20px;"></td>
<td colspan="3" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td colspan="5" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
<tr style="width:100%;height:30px;">
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td colspan="2" style="border:solid black; width:20px;"></td>
<td colspan="3" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr style="width:100%;height:30px;">
<tr style="width:100%;height:30px;">
<td colspan="7" style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
<td style="border:solid black; width:20px;"></td>
</tr>
</table>
CodePudding user response:
.table{
width: 50%;
border: 1px solid black;
border-collapse:collapse;
}
.table td {
border: 1px solid black;
padding: 2px;
}
<table class="table">
<tr>
<td colspan="2"></td>
<td>text</td>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td rowspan="5">text</td>
<td rowspan="5">text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td colspan="4">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td colspan="3">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td colspan="3">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="5">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td colspan="2">text</td>
<td colspan="3">text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td colspan="7">text</td>
<td>text</td>
<td>text</td>
</tr>
</table>