CODEWITHSUNDEEP
htmlhtml-table
shinra tensei
shinra tensei

Reputation: 713

Table with 3 headers, how to have different number of row cell?

I want to achieve this table structure 

a | b | c
1 | 1 | 1
2 | 2 | 2
3 | 3 | 3
  |   | 4

I have this code but it puts the 4 in another column instead of underneath the 3

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>   
    </tr> 
 </table>

Upvotes: 0

Views: 93

Answers (4)

Brad
Brad

Reputation: 15879

As analternative to the toher answers that add a new row, if you want the 4 to be in the same table cell as the 3, just add a line break inside the table cell

...
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3<br/>4</td>
    </tr> 
 </table>

or use div tags in the cell like this

...
    <tr>
         <td>1</td>
         <td>2</td>
         <td>
            <div>3</div>
            <div>4</div>
         </td>
    </tr> 
 </table>

Upvotes: 0

Gummy
Gummy

Reputation: 164

This is normal : in your table header, you defined three different headers, thus three different columns. Since <td></td> defines a column in a table, your '4' gets its own column which is not defined by the column headers of the table.

In order to let the 4 go underneath the 3, you should make a new table row with the last containing 4, like this :

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>   
    </tr>
    <tr>
         <td></td>
         <td></td>
         <td>4</td>   
    </tr>
 </table>

Upvotes: 0

Lowkase
Lowkase

Reputation: 5699

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>  
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>   
    </tr> 
    <tr>
         <td> </td>
         <td> </td>
         <td>4</td>   
    </tr> 
 </table>

Upvotes: 0

Bart Friederichs
Bart Friederichs

Reputation: 33531

You will have to make some empty cells, the row with the '4' in it, is a new row:

<table border="0">   
    <tr>
       <th>A</th>
       <th>B</th>
       <th>C</th>   
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>    
    </tr>   
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>   
    </tr>
    <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
    </tr> 
    <tr>
         <td></td>
         <td></td>
         <td>4</td>
    </tr> 
 </table>

Upvotes: 1

Related Questions