Table layouts

Vertical column heads

by Juan Marco

HTML

<table>
  <thead>
    <tr>
      <th><div class="vertical">One</div></th>
      <th><div class="vertical">Two</div></th>
      <th><div class="vertical">Three</div></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td></td><td>3</td></tr>
    <tr><td>1</td><td></td><td>3</td></tr>
  </tbody>
</table>
<hr>
<table>
  <thead>
    <tr>
      <th><div>One</div></th>
      <th><div>Two</div></th>
      <th><div>Three</div></th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td></td><td>3</td></tr>
    <tr><td>1</td><td></td><td>3</td></tr>
  </tbody>
</table>

CSS

.vertical { writing-mode: vertical-lr}

td {
  text-align: center;
}