Change orientation to vertical, table rows HTML + CSS

Question

I have this table:

<table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

This organizes the information in rows... But I want to rotate it and display it in columns... I hope this is enough explanation for what I want:

How I have it now:

row1: aaaa
row2: bbbb
row3: cccc imag

How I want it:

 row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag  

How can I do this with CSS?

Answer 1

If you are forced only to use CSS you can play with rotate :)

#table {
    transform:rotate(90deg);  
}
#table th, #table td{
    transform:rotate(-90deg);
}
td {
  height: 50px;
}

<table id="table">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
        <tr><th>row3</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
    </tbody>
</table>