I've been having trouble grouping the cells with the values { Lazy, Dog, Then, It } under a single header (with a colspan of 1)
So far, I've attempted using div tags within the cells, creating multiple cells, and trying various combinations of widths and colspans.
https://i.sstatic.net/ShcHi.png
Although I managed to stack Lazy and Dog under the header using div tags and CSS, they aren't treated as individual cells.
https://i.sstatic.net/Y16KE.png
<html>
<head>
<style>
table,td,tr,th{
border: 1px solid black;
}
.lazy {
float: left;
width: 50%;
}
.dog {
float: right;
width: 50%;
}
</style>
</head>
<body>
<table>
<tr>
<th>Quick</th>
<th>brown fox</th>
<th>jumps</th>
</tr>
<tr>
<td rowspan=3>over the</td>
<td><div class="lazy">lazy</div> <div class="dog">dog</div></td>
<td>and</td>
</tr>
<tr>
<td>then</td>
<td>it</td>
<td>fall</td>
</tr>
<tr>
<td colspan=2> prey to a lion </td>
</tr>
</table>
</body>
</html>
I appreciate any insights or suggestions. Thank you!