I want the column headings in an HTML table to be printed vertically

Question

I want this table

id     name       country
--     -------    -------

1       John        America
2       Smith        Mexico
3       Khan        India 

to be printed like this

id            1             2           3
name        John          Smith       Khan
country     America       Mexico      India

in HTML.

<table>
<tr>
<th>id</th>
<th>name</th>
<th>country</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>America</td>
</tr>

How should I modify the above code to get that output?

Answer 1

     <table>
     <tr>
     <th>id</th><td>1</td>
     </tr>
     <tr>
     <th>name</th><td>John</td>
     </tr>
     <tr>
     <th>country</th><td>America</td>
     </tr>
     </table>

Answer 2

Use th for the headers regardless of whether they run horizontally or vertically. You can have both a row header and a column header in the same table. You can also add the optional scope attribute which improves accessibility, gives you a hook so you can style them differently with CSS, and makes the meaning clear for maintainability.

The scope attribute specifies the set of data cells for which the current header cell provides header information. The row value provides header information for the rest of the row that contains it. And the col value provides header information for the rest of the column that contains it.

Read more about the scope attribute.

<table>
    <tr>
        <th scope="row">id</th>
        <th scope="col">1</th>
        <th scope="col">2</th>
        <th scope="col">3</th>
    </tr>
    <tr>
       <th scope="row">name</th>
       <td>John</td>
       <td>Smith</td>
       <td>Khan</td>
    </tr>
    <tr>
        <th scope="row">country</th>
        <td>America</td>
        <td>Mexico</td>
        <td>India</td>
    </tr>
</table>

EDIT: Example CSS

th[scope=row] { color: green }
th[scope=col] { color: blue }