Search code examples
htmlhtml-tablecellreverse

Reverse cells in a table row in html


I want to reverse the order of row cells in an HTML table with HTML attributes or CSS.

I've found 'reversed' attribute but it's only for HTML lists and reverses only list's counting.

[table]
    [row]
        [cell 1] [cell 2] [cell 3] [cell 4]
    [/row]
[/table]

...applying reversal....

[table]
    [row]
        [cell 4] [cell 3] [cell 2] [cell 1]
    [/row]
[/table]

Solution

  • You can abuse the direction property to get this effect:

    <table>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    </table>
    
    <br>
    
    <table style="direction:rtl">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
    </table>