I'm trying to insert two cells in a row of an HTML table

user_19368491 0
Viewed 32

I'm trying to solve an exercise on the tables using only HTML. What I should get is this table: image of the solution
The main problem with my solution is that i can't insert the cells 'RAL' and 'Ore' under the cell 'Media'. So this is my table(incorrect): image of my table

this is my code:

<table border="1" cellspacing="5" cellpadding="5" width="30%">
<caption> Tabelle dipendenti </caption>
<thead>
    <tr> 
    
    <th colsrow="2" style="background-color:yellow;"> </th> <th colsrow="2">Distribuzione </th> 
        <th colspan="2"> Media </th>
    </tr>
    
    <tr>
        <th colspan="0" > </th> <th> </th>
        <th colspan="1">RAL </th> <th colspan="1" style="background-color:red;"> Ore </th>
    </tr>
    
    <tr> 
    
    <th style="background-color:yellow;"> Manager </th> <th> 2% </th> 
    <td>100.000 € </td> <td style="background-color:red;"> - </td>
    
    </tr>
    
    <tr> 
    
    <th style="background-color:yellow">Impiegati </th> <th> 20% </th>
    <td>40.000€ </td> <td rowspan="2" style="background-color:red;">  40 </td>
    
    </tr>
    
    <tr>
    
    <th > Operai </th> <th> 78% </th> 
    <td> 35.000€ </td>
    
    </tr>
    
</thead>
</table>

Thank you in advance.

html-table html
2 Answers

Be careful with the number of total rows and columns of your table and try to split your table with a thead and tbody:

<table border="1" cellspacing="5" cellpadding="5" width="30%">
  <caption> Tabelle dipendenti </caption>
  <thead>
      <tr> 
        <th rowspan="2" style="background-color:yellow;"> </th>
        <th rowspan="2">Distribuzione </th> 
        <th colspan="2"> Media </th>

      </tr>    
      <tr>
          <th colspan="1">RAL </th>
          <th colspan="1" style="background-color:red;"> Ore </th>
      </tr>    
      <tr>     
        <th style="background-color:yellow;"> Manager </th>
        <th> 2% </th> 
        <td>100.000 € </td>
        <td style="background-color:red;"> - </td>    
      </tr>    
      <tr>     
        <th style="background-color:yellow">Impiegati </th>
        <th> 20% </th>
        <td>40.000€ </td>
        <td rowspan="2" style="background-color:red;">  40 </td>    
      </tr>    
      <tr>
        <th > Operai </th> <th> 78% </th> 
        <td> 35.000€ </td>    
      </tr>    
  </thead>
</table>

user_193832030

Does this help?

<table border="1" cellspacing="5" cellpadding="5" width="30%">
<caption> Tabelle dipendenti </caption>
<thead>
    <tr> 
    
    <th colsrow="2" rowspan="2" style="background-color:yellow;"> </th> <th colsrow="2" rowspan="2">Distribuzione </th> 
        <th colspan="2"> Media </th>
    </tr>
    
    <tr>
         
        <th colspan="1">RAL </th> <th colspan="1" style="background-color:red;"> Ore </th>
    </tr>
    
    <tr> 
    
    <th style="background-color:yellow;"> Manager </th> <th> 2% </th> 
    <td>100.000 € </td> <td style="background-color:red;"> - </td>
    
    </tr>
    
    <tr> 
    
    <th style="background-color:yellow">Impiegati </th> <th> 20% </th>
    <td>40.000€ </td> <td rowspan="2" style="background-color:red;">  40 </td>
    
    </tr>
    
    <tr>
    
    <th > Operai </th> <th> 78% </th> 
    <td> 35.000€ </td>
    
    </tr>
    
</thead>
</table>

Changes made: 1.added rowspan="2" to first th 2.removed <th colspan="0" > </th>

user_28201500
Related