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

Solution 1:

First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.

Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.

With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.

Solution 2:

The First Option... I think it is the better and simple approach..

Solution 3:

Honestly, option 1. I would suggest you to look at this example from W3.org(link below). I think this method is the best, because this way your headings will also be interpreted right on screen readers.

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only