html number of columns in table - html

Question

I am trying to create the following html table:
I can't work out why my current implementation is not yielding my desired result. As you can see in the snippet, the last <td> in the second <tr> spans 2 cols, and not the middle <td>.
table{
width: 100%;
}
table tr td {
background-color: #ddd;
}
table tr td[colspan="2"]{
background-color: #0a0;
}
table tr td[colspan="4"]{
font-size: 16px;
text-align:center;
background-color: #8C0000;
color: #fff;
}
<table>
<tbody>
<tr>
<td colspan="4"><b>Full width column</b></td>
</tr>
<tr>
<td>Column 1</td>
<td colspan="2">Column 2</td>
<td>Column 3</td>
</tr>
</tbody>
</table>
In researching I found the following from: https://www.w3.org/TR/WD-html40-970917/struct/tables.html
There are several ways to determine the number of columns:
Count the number of columns as specified by COL and COLGROUP elements which can only occur at the start of the table (after the
optional CAPTION).
Scan each row in turn to compute the number of columns needed for each row, taking into account cells that span multiple rows and/or
columns. Set the number of columns for the table to be the maximum
number of columns from each row. For any row that has less than this
number of columns, the end of that row should be padded with empty
cells. The "end" of a row depends on the directionality of the table.
[deprecated] Use the cols attribute on the TABLE element. This is the weakest method since it doesn't provide any additional information about
column widths. This may not matter, however, if the author uses style
sheets to specify widths.
So what have I misunderstood about this functionality?
Please also note, that I am aware that I can use css to specifically set the widths of the <td>'s I want to know why my current implementation is not working.

Answer 1

In fact the second td does span two columns, but the width of columns in a simple HTML table depends on the contents of the table cells. If you add the following style attributes containing widths to the tds, their widths are distributed as desired (i.e. 25/50/25%):
(Note: You could/should also apply CSS classes to those tds and create external CSS rules for those classes)
table{
width: 100%;
}
table tr td[colspan="4"]{
font-size: 16px;
text-align:center;
background-color: #008CD1;
color: #fff;
}
<table>
<tbody>
<tr>
<td colspan="4"><b>Nonverbal skills</b></td>
</tr>
<tr>
<td style="width: 25%; background-color: #888;">energised</td>
<td colspan="2" style="width: 50%; background-color: green;">Gestures</td>
<td style="width: 25%; background-color: #888;">Under energised</td>
</tr>
</tbody>
</table>

Answer 2

table.table td:nth-child(1) {text-align: center; font-weight: bold; width: 70px;}