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.
| How many tries | How many successes | Number of tries per success |
|---|---|---|
| 1 | 1 | 1 |
| 2 | 1 | 2 |
| 3 | 2 | 0.67 |
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
