HTML table, are headers Attribute columns identifiers? - html

Question

I want to give to each of my table <th>'s an identifier, so It won't matter the other when I am using the <td> (while I know the identifier), I found this (HTML headers Attribute), which seems like what I need:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone#example.com</td>
</tr>
</table>
But I change the order of the <td>'s like this, first the email and then the name:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
</tr>
<tr>
<td headers="email">someone#example.com</td>
<td headers="name">John Doe</td>
</tr>
</table>
And as you can see the result that I get is the same.

Answer 1

The header attribute has no effect on presentation; it will not swap table cells around. The header attribute simply denotes which <th> cells the <td> cells relate to for the purposes of enhancing screen readers:
This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the <th> element alone or the <th> element with the scope attribute.
Note that each <td> cell can relate to more than one header cell, if the table contains more than one header row. For example:
<table>
<tr>
<th rowspan="2" id="h">Homework</th>
<th colspan="3" id="e">Exams</th>
<th colspan="3" id="p">Projects</th>
</tr>
<tr>
<th id="e1" headers="e">1</th>
<th id="e2" headers="e">2</th>
<th id="ef" headers="e">Final</th>
<th id="p1" headers="p">1</th>
<th id="p2" headers="p">2</th>
<th id="pf" headers="p">Final</th>
</tr>
<tr>
<td headers="h">15%</td>
<td headers="e e1">15%</td>
<td headers="e e2">15%</td>
<td headers="e ef">20%</td>
<td headers="p p1">10%</td>
<td headers="p p2">10%</td>
<td headers="p pf">15%</td>
</tr>
</table>
In order to swap table cells around, you'd be much better off using either flexbox (making use of flex-direction) or a JavaScript solution.