The sorting icon needs to be below the text in order to narrow tables, and to improve accessibility for those using screen readers. There are updated links below.
This would make tables fit better in more screen widths. Some Covid-19 pages with examples of sorting icons placed below the table header text:
Note that this is not necessary once there are 7 digit numbers with commas making the cells wider as in later Covid months.
The above template table with a row of sorting icons is on this page linked below that gets 30,000 views per day. That means it is seen in all screen widths from narrow to wide.
But a separate row of sorting icons annoys those using screen readers. It's not a deal breaker for them. It's just annoying. From an April 2020 discussion someone using a screen reader wrote: "It's still very readable with the empty/clickable row, it's just more annoying to have to go past blank cells; I know they can occur in other circumstances, too. Perhaps this is one of these cases where a minor accessibility improvement loses out for now to better display on screens." Discussion:
It is better to put the default location of the sorting icon below the header text rather than above it. This way the sorting icons line up evenly.
Also, please center the sorting icon horizontally below the text. style="background-position: center;"
Maintaining a separate row of sorting icons requires additional steps. Many table editors are not familiar with any of this. They have to know it is possible. They have to know to add <br> to it in order to make it visible, or otherwise it is just a narrow incomprehensible bar. They have to know to add data-sort-type=number to the header cell with the sorting icon in order for that column to sort numbers correctly. See Help:Sorting section: