HTML: tbody columns first look the order of thead columns and then display

I have some problem using HTML tables.

Below I have a table structure.

<table>
    <caption>Movie Details</caption>
    <thead>
        <tr>
            <th axis="m" header="movie">Movie Name</th>
            <th axis="g" header="genre"> Genre</th>
        </tr>
    </thead>
    <!-- note: rows generates dynamically using loop -->
    <tbody>
        <tr>
            <td axis="m">Aanjana Anjani</td>
            <td axis="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Bodyguard</td>
            <td ax开发者_StackOverflow社区is="g">Romance</td>
        </tr>
        <tr>
            <td axis="m">Gajini</td>
            <td axis="g">Action</td>
        </tr>
        <tr>
            <td axis="m">Singham</td>
            <td axis="g">Action</td>
        </tr>
    </tbody>
</table>

Currently this table is sorted by movie name, now

Is there any way that, if I swap the column in <thead> then <tbody>, data is swapped automatically (means tbody looking to thead and then display ) using only HTML?

means if I change the column order ( genre is first column now),

<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>

then column of each row of <tbody> should be changed.

I think the axis and headers attributes may be helpful for this but not getting the exact.

Reference for axis in headers.

You can if you're willing to consider (just a little) CSS. In the example below, you "switch columns" simply by swapping the names of the CSS classes. (that is, change .right to .left, and .left to .right). You don't have to make any changes to the HTML in the table itself.

<style type="text/css">
   .right {width:100px; float:right;}
   .left {width:100px; float:left;}
</style>

<table>
   <thead>
      <tr>
         <td width="250px">
            <div class="right">LEFT</div>
            <div class="left">RIGHT</div>
         </td>
      </tr>
   </thead>
   <tr>
      <td width="250px">
         <div class="right">L Data</div>
         <div class="left">R Data</div>
      </td>
   </tr>
</table>

What do you mean by "if i change the column order"?

You can only change the HTML structure in real time using JavaScript.

If you want to change it without JavaScript you then have to reload the page with a server side language like PHP which will sort the table and write the HTML code differently.

Anyway you choose, swapping only the <thead> content or replacing it is not enough. You still have to replace/change the content of the <tbody> also to see the items sorted in the new way.