I am in need of creating a table similar to the one shown in this image: https://i.sstatic.net/ztBIj.png
Here is the HTML code for the table I implemented:
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th rowspan="3">Subject code and Subject Name</th>
<th colspan="2" rowspan="2">Internal Assessment</th>
<th colspan="2" rowspan="2">External Assessment</th>
<th colspan="2">Grand Total</th>
<th rowspan="3">Remarks</th>
</tr>
<tr>
<th rowspan="2">MM</th>
<th rowspan="2">MO</th>
<td></td>
</tr>
<tr>
<th>MM</th>
<th>MO</th>
<th>MM</th>
<th>MO</th>
</tr>
<tr>
<td class="subject">Economics Theory</td>
<td class="total">40</td>
<td class="obtained">32</td>
<td class="total">60</td>
<td class="obtained">43</td>
<td class="total">100</td>
<td class="obtained">75</td>
<td>P</td>
</tr>
<tr>
<td class="subject">Elemetns of Statistics</td>
<td>40</td>
<td>31</td>
<td>60</td>
<td>38</td>
<td>100</td>
<td>69</td>
<td>P</td>
</tr>
<tr>
<td class="subject">Company Law</td>
<td>40</td>
<td>32</td>
<td>60</td>
<td>47</td>
<td>100</td>
<td>79</td>
<td>P</td>
</tr>
<tr>
<td class="subject">Money, Banking, Financial Management</td>
<td>40</td>
<td>31</td>
<td>60</td>
<td>36</td>
<td>100</td>
<td>67</td>
<td>P</td>
</tr>
<tr>
<td class="subject">Elements of Coding</td>
<td>40</td>
<td>32</td>
<td>60</td>
<td>47</td>
<td>100</td>
<td>79</td>
<td>P</td>
</tr>
</table>
The outcome I received from the above code was not as expected. I attempted to remove certain parts but that resulted in an unexpected outcome. https://i.sstatic.net/FtF3F.png
While trying to correct the issue with additional elements in the code, the result was completely different than anticipated. https://i.sstatic.net/6mLf2.png
Additionally, here is the CSS code used for styling:
table {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.subject {
text-align: left;
padding-left: 10px;
padding-right: 95px;
}
.second {
width: 20%;
}
.total {
padding-left: 30px;
padding-right: 30px;
}
.obtained {
padding-left: 50px;
padding-right: 50px;
}