Имхо, некрасиво.
Лучше так:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
table{border:1px solid #000}
</style>
</head>
<body>
<table onclick="rotate(this)" >
<tr>
<td>Заголовок1-1</td><td>Заголовок1-2</td><td>Заголовок1-3</td>
</tr>
<tr>
<td>Результат2-1</td><td>Результат2-2</td><td>Результат2-3</td>
</tr>
<tr>
<td>Результат3-1</td><td>Результат3-2</td><td>Результат3-3</td>
</tr>
<tr>
<td>Результат4-1</td><td>Результат4-2</td><td>Результат4-3</td>
</tr>
</table>
<script type="text/javascript">
function rotate( table ){
if(typeof table === 'string') table = document.getElementById(table);
var tr = table.rows,
i = tr.length,
j = tr[0].cells.length,
new_table = document.createElement('table');
while(j--){
for(var new_tr = new_table.insertRow(0), l = 0; l < i; l++ ){
new_tr.appendChild(tr[l].cells[j])
}
}
return table.parentNode.replaceChild(new_table,table)
}
</script>
</body>
</html>