Question

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 axis="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.

Answer 1

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>