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?
This probably isn't the solution you're expecting, I would really encourage you to look at the new CSS Flexible Box Model instead of using HTML tables as it'll make your life much easier in these sort of scenarios.
If you're interested, take a look at my answer for a very similar question at Vertical Menu (+ Sub-Menu) stacks unnaturally.