Currently, I am working on a template using HTML and CSS. One issue that I am facing involves designing a table template with HTML and CSS.
The specific problem occurs in the second row of the table where there are 4 cells in the first column and only one cell in the second column.
In the first column, the header is 'performance' and the second cell is divided into 4 separate cells.
Meanwhile, the second column has the header 'disciplinary' and only one cell in the second row.
I have been experimenting with different solutions but haven't found the perfect design for this table yet.
One idea I tried was:
<table>
<thead>
<tr>
<th>
Performance Rating for
last two years
</th>
<th>Disciplinary letters (in last two years)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Year</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Year</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This is the web design layout desired:
https://i.sstatic.net/tmEaH.png
After updating the post:
Can someone please show me how to achieve this by using colspan and rowspan?
Adjusting the width of the second cell next to the year under the 'performance rating' column is necessary for my requirements.
<table border="1">
<thead>
<tr>
<th colspan="2">
Performance Rating for
last two years
</th>
<th>Disciplinary letters (in last two years)</th>
</tr>
</thead>
<tbody>
<tr colspan="2">
<td>Year</td>
<td ></td>
<td rowspan="2"></td>
</tr>
<tr colspan="2">
<td >Year</td>
<td></td>
</tr>
</tbody>
</table>