Vertical table headers in html
<p>Consider the following html file:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Test of table&lt;/title&gt;
        &lt;style type="text/css"&gt;
            p {text-align:justify;}
            li {text-align:justify;}
            ins {background-color:#A0FFA0;}
            del {background-color:#FFA0A0;}
            .code {background-color:#EEEEEE;}
            .codex {background-color:#FFFFE0;}
            .custom-table {
                text-align:center;
                font-family:monospace;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;table border="1" class="custom-table"&gt;
            &lt;tr&gt;
                &lt;th&gt;&lt;/th&gt;
                &lt;th&gt;First column&lt;/th&gt;
                &lt;th&gt;Second column&lt;/th&gt;
                &lt;th&gt;Third column&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;First row&lt;/td&gt;
                &lt;td&gt;1&lt;/td&gt;
                &lt;td&gt;2&lt;/td&gt;
                &lt;td&gt;3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Second row&lt;/td&gt;
                &lt;td&gt;2&lt;/td&gt;
                &lt;td&gt;4&lt;/td&gt;
                &lt;td&gt;6&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;Third row&lt;/td&gt;
                &lt;td&gt;3&lt;/td&gt;
                &lt;td&gt;6&lt;/td&gt;
                &lt;td&gt;9&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt; 
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I would like the <code>First column</code>, <code>Second column</code>, <code>Third column</code> (or in other words, all the <code>th</code> elements of the <code>custom-table</code>) texts to be non-bold, vertically written (+90° rotation counter-clockwise), vertically centered and horizontally centered within header cells. How to do that by modifying this document?</p>

<p>Note: I don't need backward compatibility with non-html5 browsers, I don't want javascript, and I don't want an external CSS.</p>

<p>Here is an example of the kind of alignment I want:</p>

<p><a href="https://i.stack.imgur.com/mBjOd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mBjOd.png" alt="enter image description here"></a></p>