Despues de unos dias encontre la solucion Y lo posteo. Espero q a alguien le pueda servir O si lo mejora y lo comparte mucho mejor ;)
Lo primero q hay q acer es poner un span o div en cada una de las cabeceras de la tabla en el code html asi
Código:
...
<th><div class="rotar">EDUCACION FISICA</div></th>
<th><div class="rotar">ARTES MARCIALES</div></th>
...
y como class css esto
Código:
.rotar
{
display:block;
white-space:nowrap;
width:20px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
agregarle adicionalmente al th un estilo algo asi
Código:
...
<th style="padding-left:5px;padding-bottom:5px;text-align:center;height:215px;vertical-align:bottom;"><th><div class="rotar">EDUCACION FISICA</div></th>
...
y listo! ...con eso qda solucionado el problema :) . Hay un inconveniente. En FF se ve muy bien pero en IE 8 no se aprecia bien (q novedad)
en FF 3.6.7 
en IE 8 se ven cortados las cabeceras 
Si alguien pudiera arreglarlo. Bienvenido sea
Salu2