Here is the code I am currently working with:
<table>
<colgroup>
<col class="left">
<col>
</colgroup>
<thead>
<tr>
<th scope="col">HTML tag</th>
<th scope="col">Use</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>Creates the table element</td>
</tr>
<tr>
<td>thead</td>
<td>Wraps the heading section</td>
</tr>
<tr>
<td>tbody</td>
<td>Wraps the main body of the table</td>
</tr>
<tr>
<td>tfoot</td>
<td>Wraps the footer of the table</td>
</tr>
<tr>
<td>tr</td>
<td>Creates a row</td>
</tr>
<tr>
<td>th</td>
<td>Creates a heading cell</td>
</tr>
<tr>
<td>td</td>
<td>Creates a data cell</td>
</tr>
</tbody>
</table>
Additionally, here is the CSS rule that I have applied:
.left {
font-family: monospace;
font-weight: bold;
}
Despite applying the CSS rule to change the column's font style, nothing seems to be happening. There are no other font-family or font-weight rules in the stylesheet. When inspecting the elements and hovering over the col, the entire column appears to be affected by the CSS rule. I feel like the solution might be something simple and obvious, but for some reason, I can't seem to identify the problem.