Sideways Table Header Text

The CSS writing-mode property can be used to set table header text sideways. The text is printed vertical instead of horizontal.

Here is a table as an illustration.

I'll show you how to set table header text sideways like that.

Here is the CSS. You'll notice that the declaration applies to th table header tags.

<style type="text/css">
th { writing-mode: vertical-rl; text-align: left; }
</style>

The writing-mode: vertical-rl; declaration puts the table header lines sideways. The text-align: left; declaration makes multi-line headers align at the beginning of the text (left, if the text was not sideways).

Here is the code of the entire table, including the CSS:

<style type="text/css">
th { writing-mode: vertical-rl; text-align: left; }
</style>

<table border="1" cellpadding="9" cellspacing="0" style="border:1px solid black;">
<tr>
<th>How many tries</th>
<th>How many successes</th>
<th>Number of tries<br>per success</th>
</tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>2</td><td>1</td><td>2</td></tr>
<tr><td>3</td><td>2</td><td>0.67</td></tr>
</table>

As you can see, there is nothing special about the table code, just a regular table. It's the CSS that does the trick.

Make a note of writing-mode: vertical-rl; and you will have the CSS necessary to make a table header line publish sideways.

(This content first appeared in Possibilities newsletter.)

Will Bontrager