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

Question

I want this table

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

to print as follows

 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 do I modify the above code to get this output?

Answer 1

Use th for headers, whether they run horizontally or vertically. You can have both a row heading and a column heading in one table. You can also add an optional scope attribute that will improve accessibility, give you a hook so that you can style them differently with CSS, and makes sense clear for ease of maintenance.

The scope attribute indicates 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 line that contains it. And the col value provides header information for the rest of the column containing it.

Learn more about the area 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 : CSS Example

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

Answer 2

  <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 3

I like this question and I cannot do it with css. You can get it by updating your HTML code to enjoy it.

 <table> <tr> <th>id</th> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <th>name</th> <td>John</td> <td>Akhil</td> <td>Sas</td> </tr> <th>country</th> <td>America</td> <td>India</td> <td>Canada</td> </tr> </table> 

Answer 4

This is actually very simple with CSS.

HTML

 <table> <tr> <th>id</th> <th>name</th> <th>country</th> </tr> <tr> <td>1</td> <td>John</td> <td>America</td> </tr> <tr> <td>2</td> <td>Smith</td> <td>Mexico</td> </tr> <tr> <td>3</td> <td>Khan</td> <td>India</td> </tr> </table> 

CSS

 @media print { tr { display: inline-block; } th, td { display: block; } } 

Result