'HTML Table vertically rather than horizontally?

I've got this table, and in this table are 4 columns, like this:

Column1|Column2|Column3|Column4|
data 1  data 2  data 3  data 4

But how do I get it like this?

Column1| data 1
Column2| data 2
Column3| data 3
Column4| data 4

This is my code:

<table>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
    </tr>
</table>

Any ideas? Is it even possible?

htmlcsshtml-table


Solution 1:[1]

Like this:

<table>
    <tr>
        <th>Column1</th>
        <td>Data 1</td>
    </tr>
    <tr>
        <th>Column2</th>
        <td>Data 2</td>
    </tr>
    <tr>
        <th>Column3</th>
        <td>Data 3</td>
    </tr>
    <tr>
        <th>Column4</th>
        <td>Data 4</td>
    </tr>
</table>

Solution 2:[2]

You put the th in the table rows

<table>
  <tbody>
    <tr>
       <th>Column 1</th>
       <td>Data 1</td>
    </tr>
    <tr>
       <th>Column 2</th>
       <td>Data 2</td>
    </tr>
  </tbody>
</table>

Solution 3:[3]

<table>
    <tr>
        <th>Column 1</th>
        <td>Data 1</td>
    </tr>
    <tr>
        <th>Column 2</th>
        <td>Data 2</td>
    </tr>
    <tr>
        <th>Column 3</th>
        <td>Data 3</td>
    </tr>
    <tr>
        <th>Column 4</th>
        <td>Data 4</td>
    </tr>
</table>

Solution 4:[4]

Maybe scope attribute can help you?

<table>
    <tr scope="row">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
        <th>Column4</th>
    </tr>
    <tr>
       <td>Some content</td>
       <td>Some content</td>
       <td>Some content</td>
       <td>Some content</td>
    </tr>
</table>

Also here, you get another solution by CSS.

Solution 5:[5]

you can use below pattern But i'll suggest you to use css tables : Page layout, Divs instead of Tables

<table>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
    <tr>
       <th>Column1</th><td>data 1</td>
    </tr>
</table>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 scrblnrd3
Solution 2 epascarello
Solution 3 takendarkk
Solution 4 Community
Solution 5 Community

Related Questions