Most common way of writing a HTML table with vertical headers?

html

responsive-design

best-practices

accessibility

byAlex Kataev·Feb 28, 2025

To build a vertical header in a HTML table, use <th scope="row"> for row-level headers. The semantics of this markup give us the accessibility and structural validity we yearn for.

Here's an example:

<table>
  <tr>
    <th scope="row">Year</th>
    <!-- In 2023 we might have hoverboards! 🏂 -->
    <td>2023</td>
  </tr>
  <tr>
    <th scope="row">Event</th>
    <!-- The year we first met martians... 😲-->
    <td>Launch</td>
  </tr>
</table>

Every row commences with a header cell (<th>), denoted as headers using the scope attribute set to "row".

Structuring by the books

When it comes to vertical headers, keep in mind to preserve your table structure, even in absence of CSS. The <strong> tag can come in handy to highlight key elements.

Using <thead>, <tfoot>, and <tbody> tags is crucial for ensuring your table conforms to HTML table structural standards.

Guarding compatibility

Keep the table structure standard-friendly to ensure browser compatibility.

Wrestling with CSS

Ease up on the CSS for styling, and focus more on keeping the foundational structure intact. CSS is like hot sauce - great in moderation but can ruin two tacos at once.

Key touches for vertical headers

Scope="row" is your ally in making <th> behave as vertical headers.
Leverage colspan to ensure header-cells alignment.
For responsiveness and accessibility, think twice before using CSS absolute positioning on headers.

Beyond common tables

Look beyond usual HTML tables and leverage CSS grid or flexbox layouts. They provide flexibility and innovative styling options for non-conventional table structures.

Championing accessibility

Keep accessibility at the forefront of your design philosophy. Correct usage of <th> elements aids readability for screen readers, making the web more inclusive for everyone.