Plain HTML without CSS: Colspan not working properly in th/td, consistent across all lines
I don't understand why my colspan is not working. I have a CSS solution but I'm just confused as to why this doesn't work. The first column should be 1/3 the width of the other columns, with colspan="1" on the first column and the td, and colspan="3" on all other columns.
The application is for a leaderboard, so the first column will contain the ranking numbers (1, 2, 3...) and needs to be much narrower than subsequent columns.
Of course you can use class="colspan-3" and class="colspan-1" and css colspan-1{width:4.5%} colspan-3 {width:13.5%} to solve or any mathematical result... However, I really just want to know what's going on.
Adding details because I think this question will help someone in the future:
At the time, I thought I could use colspan as a relative unit, essentially by making each column's width relative to the other columns. The problem I'm having is that each column has the exact same units. It only works on individual cells in a column and is essentially similar to the "Merge" feature in Microsoft Excel.
<table border="2">
<thead>
<tr>
<th colspan="1">th1 colspan1</th><!-- colspan=1 here -->
<th colspan="3">th2 colspan3</th>
<th colspan="3">th3 colspan3</th>
<th colspan="3">th4 colspan3</th>
<th colspan="3">th5 colspan3</th>
<th colspan="3">th6 colspan3</th>
<th colspan="3">th7 colspan3</th>
<th colspan="3">th8 colspan3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">td1 colspan1</td><!-- colspan=1 here -->
<td colspan="3">td2 colspan3</td>
<td colspan="3">td3 colspan3</td>
<td colspan="3">td4 colspan3</td>
<td colspan="3">td5 colspan3</td>
<td colspan="3">td6 colspan3</td>
<td colspan="3">td7 colspan3</td>
<td colspan="3">td8 colspan3</td>
</tr>
</tbody>
</table>
