write vertically in table rows - html

Question

I want to write vertically in HTML table.In the last column, I want to the text "time table" to be displayed vertically. It should cover all the rows. Something like this:
L
U
N
C
H
How to do this ?
Here is the table i want to create.
<table style = "border-collapse: collapse" border = "1px">
<thead>
<tr>
<th colspan="6" align="center"> Time Table </th>
</tr>
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
</table>

Answer 1

Put your lunch break text inside a div and apply this css
word-wrap: break-word;width:11px;
Have a look at this jsfiddle demo

Answer 2

Add an id (or class) to the th you want vertical text in, and then you can add the following jQuery function - adds a line break after each character:
$(function() {
var html=$('#verticalText').html();
var newHtml='';
for (var i=0;i<html.length;i++) {
newHtml=newHtml+html[i];
newHtml=newHtml+'<br/>';
}
$('#verticalText').html(newHtml);
});
http://jsfiddle.net/K3Ab2/
(modified from Naor's answer to: Add line breaks after n numbers of letters in long words)

Answer 3

Use following HTML code
<table id="MyTable" style = "border-collapse: collapse" border = "1px">
Time Table
<tr>
<th>DAY/TIME</th>
<th>8-9</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th rowspan = "6" id="vertical" style="verticle-align: buttom">Lunch Break</th>
</tr>
<tr>
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Tue</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Wed</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Thu</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>Fri</th>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Use Following CSS
table#MyTable tr th#vertical {
width: 1.2em;
white-space: nowrap;
color: #000;
/*Firefox*/
-moz-transform: rotate(-90deg);
/*Safari*/
-webkit-transform: rotate(-90deg);
/*Opera*/
-o-transform: rotate(-90deg);
/*IE*/
writing-mode: tb-rl;
filter: flipv fliph;
border:1px black solid;
}
See this link