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

html

Solution

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 }

Problem

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?

Original source