CODEWITHSUNDEEP
html
Night Walker
Night Walker

Reputation: 21280

Html making a table with vertical columns

I am trying to make a table with vertical columns ,

Is my code makes it how it should implemented ?

<table border="1" cellpadding="5" cellspacing="5" width="100%" style="background        color:white;">
<tr>
    <th >Table header</th>
    <td>Table cell 1</td>
    <td>Table cell 2</td>
</tr>
</table>

Upvotes: 4

Views: 24560

Answers (2)

Pavan
Pavan

Reputation: 4339

Try something like below to get multiple rows with multiple columns

<table border="1" cellpadding="5" cellspacing="5" width="100%"   
style="background        color:white;">     
<tr>
     <th>Header Name1</th>     
     <th>Header name2</th>     
</tr>     
<tr>         
    <td>Row 1 Column 1</td> 
    <td>Row 2 Column 2</td>     
</tr>    
<tr>         
    <td>Row 2 Column 1</td> 
    <td>Row 2 Column 2</td>     
</tr>    

</table>

You have to add a separate tr tag for each row.

Upvotes: 5

Mahmoud Gamal
Mahmoud Gamal

Reputation: 79979

To create a table with multiple vertical columns and multiple rows you need to structure your table as a set of <tr>'s the first is the table header, each <td> in this header is a column header cell and the following <tr>'s are the rows like this:

 <table border="1" cellpadding="5" cellspacing="5" width="100%" style="background        color:white;">
    <tr>
       <th>Column1</th>
       <th>Column2</th>
       <th>Column3</th>
    </tr>
    <tr>
       <td>Row 1 Column 1</td>
       <td>Row 1 Column 2</td>
       <td>Row 1 Column 3</td>
    </tr>
    <tr>
       <td>Row 2 Column 1</td>
       <td>Row 2 Column 2</td>
       <td>Row 2 Column 3</td>
    </tr>
</table>

See this Fiddle

Upvotes: 1

Related Questions