table with rowspan and colspan

Question

can somebody explain that how does this colspan and rowspan system works, i have made this with rowspan="4" but it looks like it is actually 3 and not 4 i mean the result, and why are '55577855' and 'ikä' are on right side, shoudn't those two be under 'henkilöstöt' ? i have tried many times.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body>


<table >
 
<tr>
  <th rowspan="4">Henkilöstöt</th>
  <th colspan="3">koulutus</th>
</tr>
<tr>
 <th rowspan="3">Muu</th>
 <th rowspan="3">Ammattiiiii</th>
 <th rowspan="3">korkeakoulu</th>
</tr>
  
   <tr>
    <th >55577855</th>
  </tr>
   <tr>
    <th>ikä</th>   

  </tr>

</table>
   

  

</body>
</html>

The [HTML specification has examples of how these attributes work](https://html.spec.whatwg.org/multipage/tables.html#table-examples)... — Heretic Monkey, May 23 '18 at 18:42
among other things, you don't have any regular table cells (`td`), but only header cells (`th`) , which for sure isn't valid HTML... — Johannes, May 23 '18 at 18:52
@Johannes Could you correct that so i could learn from it, it should look same but '55577855 ' and 'ikä' should be under 'henkilöstöt' — waleedd32, May 23 '18 at 18:54

score 1 · Answer 1 · answered May 23 '18 at 18:38

1

The rowspan and colspan are attributes of tag how could you use that with tr and th

You should try to use the colspan and rowspan with td

answered May 23 '18 at 18:38

Shubham Kumar

295
3
13

Could you correct that, it should look same but '55577855 ' and 'ikä' should be under 'henkilöstöt' – waleedd32 May 23 '18 at 18:41
sure, wait for a moment i will post you the code – Shubham Kumar May 23 '18 at 18:58

Shubham Kumar · Answer 2 · 2018-05-23T19:25:10.647

1

maybe, this will help you..

    <table border ="1">

<tr>
  <th>Henkilöstöt</th>
  <th>koulutus</th>
</tr>

  <tr>
<td >Muu</th>
 <td >Ammattiiiii</td>
 <td >korkeakoulu</td>
</tr>
   <tr>
    <td>55577855</td>
  </tr>
   <tr>
    <td>ikä</td>   


  </tr>



</table>

edited May 23 '18 at 19:25

answered May 23 '18 at 19:02

Shubham Kumar

295
3
13

it doesnt look the same, check it – waleedd32 May 23 '18 at 19:04
@waleedd32 sorry posted wrong code i will edit it, wait – Shubham Kumar May 23 '18 at 19:06
and why does '55577855' and 'ikä' are on right side, shoudnt those two be under 'henkilöstöt' ?, this problem @waleedd32 is solved – Shubham Kumar May 23 '18 at 19:09
@Shubnam Kumar, yeah but others should look same as mine – waleedd32 May 23 '18 at 19:10
@waleedd32 i have updated the code check it – Shubham Kumar May 23 '18 at 19:12
@Shubnam Kumar no it doesnt look the same – waleedd32 May 23 '18 at 19:14
@waleedd32 let me try once again – Shubham Kumar May 23 '18 at 19:18

Johannes · Answer 3 · 2018-05-23T19:25:26.327

It's hard to guess what you really want (you should have supplied a graphic of he desired output), but if you want the last two table rows to go under the other ones, you have to insert two empty rows to make up for the rowspans in the first row.

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-collapse: collapse;
    }
    
    th,
    td {
      border: 1px solid black;
      padding: 5px;
      text-align: left;
    }
  </style>
</head>

<body>


  <table>

    <tr>
      <th rowspan="4">Henkilöstöt</th>
      <th colspan="3">koulutus</th>
    </tr>
    <tr>
      <td rowspan="3">Muu</td>
      <td rowspan="3">Ammattiiiii</td>
      <td rowspan="3">korkeakoulu</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>

    <tr>
      <td colspan="4">55577855</td>
    </tr>
    <tr>
      <td colspan="4">ikä</td>
    </tr>

  </table>




</body>

</html>

score 0 · Answer 4 · answered May 23 '18 at 19:08

Rowspan makes an element extend down into the next row.

You have four rows:

Henkilöstöt, koulutus
Muu, Ammattiiiii, korkeakoulu
55577855
ikä

When you tell the second row to extend three rows down, you aren't telling it to become three times as large, you're telling it to appear on the same row as the third and fourth row. The third and fourth row keep their data cells and push them to the first available location.

You should either stick two empty rows after the korkeakoulu row, or you should reduce the values of all of your rowspans by 2.

EDIT

<tr>
  <th rowspan="2">Henkilöstöt</th>
  <th colspan="3">koulutus</th></tr>
<tr>
 <td>Muu</td>
 <td>Ammattiiiii</td>
 <td>korkeakoulu</td>
</tr>

<tr>
<td >55577855</td>
</tr>
<tr>
<td>ikä</td>   

</tr>

</table>

Or you can use:

<table>
<tr>
  <th rowspan="4">Henkilöstöt</th>
  <th colspan="3">koulutus</th>
</tr>
<tr>
 <th rowspan="3">Muu</th>
 <th rowspan="3">Ammattiiiii</th>
 <th rowspan="3">korkeakoulu</th>
</tr>
<tr></tr>
<tr></tr>
   <tr>
    <th >55577855</th>
  </tr>
   <tr>
    <th>ikä</th>   

  </tr>

</table>

table with rowspan and colspan

4 Answers4