HTML Table with vertical rows

How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.

enter image description here

I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.


  • You can use <th> as the first cell in the row. Here's a fiddle:

    @vishesh so you want to transpose your table after DOM ready? try this

    $(function() {
        var t = $('#thetable tbody').eq(0);
        var r = t.find('tr');
        var cols= r.length;
        var rows= r.eq(0).find('td').length;
        var cell, next, tem, i = 0;
        var tb= $('<tbody></tbody>');
            cell= 0;
            tem= $('<tr></tr>');
                next= r.eq(cell++).find('td').eq(0);