[SOLVED] How to generate a table with cells merged in a column

How to generate a table with cells merged in a column

This is the table I expect:

And I used this code, but did not get the expected result

<table border="1" align="center" cellpadding="10px">
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>

    <tr>
      <td rowspan="2"> g </td>
      <td rowspan="1"> h </td>
      <td rowspan="3"> i </td>
    </tr>

    <tr>
      <td rowspan="2"> j </td>
    </tr>

    <tr>
      <td rowspan="1"> k </td>
    </tr>

  </tbody>

</table>

Solution

may be this way ?

first hack (add a hiding cell, but seems to give a random rendering)

td {
  border     : 1px solid black;
  text-align : center;
  width      : 5em;
  background : whitesmoke;
}

.noZ {
  visibility : collapse;
  border     : 0;
  width      : 0;
  }

body {
  background : lightblue;
}
table {
  background : whitesmoke;
}

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>d</td>
      <td>e</td>
      <td>f</td>
    </tr>
    <tr>
      <td rowspan="2"> f </td>
      <td rowspan="1"> g </td>
      <td rowspan="3"> h </td>
    </tr>
    <tr>
      <td rowspan="2"> j </td>
      <td class="noZ"></td>  <!-- z -->
    </tr>
    <tr>
      <td rowspan="1"> i </td>
    </tr>
  </tbody>
</table>

An other way:

second hack ( "hide" first column)

table {
  --bordersColor  :  darkblue;
  border-collapse : separate;
  border-spacing  : 0;
  margin-bottom   : .8em;
  box-sizing      : border-box;
  border-top    : 1px solid var(--bordersColor);
  border-left   : 0;
  border-right  : 1px solid var(--bordersColor);
  border-bottom : 0;
  }
th,td {
  box-sizing    : content-box;
  border        : 0;
  border-left   : 1px solid var(--bordersColor);
  border-bottom : 1px solid var(--bordersColor);
  }
th {  
  background-color : #7fccff;
  padding          : .4em .6em ;
  }
td {
  background-color : whitesmoke; 
  padding          : .2em .5em;
  text-align       : left;
  width            : 5em;
  }
tr > th:first-child ,  /* "hide" first  column */
tr > td:first-child {
  padding-left     : 0;  
  padding-right    : 0;
  max-width        : 0 !important;
  overflow         : hidden;
  background-color : transparent;
  border           : 0 !important;
  }

<table>
  <thead>
    <tr><th>0</th> <th>a</th> <th>b</th> <th>c</th>  </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>d</td> <td>e</td> <td>f</td> </tr>
    <tr>
      <td>2</td>
      <td rowspan="2"> f </td>
      <td rowspan="1"> g </td>
      <td rowspan="3"> h </td>
    </tr>
    <tr>
      <td>4</td>
      <td rowspan="2"> j </td>
    </tr>
    <tr>
      <td>5</td>
      <td rowspan="1"> i </td>
    </tr>
  </tbody>
</table>

your question haunted me a bit...

the problem comes from the fact that the height of the cells is made from their content, and as the cells with a rowspan=2 only need one line this one is reduced in height, to the extent that there is no cell with a rowspan=1 related to one of its 2 rows.

The other problem is that the tables have kept a css2 logic in which the min-height has no effect.
Hence the use of height: 3.4em; which I adjusted as best I could.
if the cell needs more, this height will be automatically enlarged accordingly

table {
  --bordersColor  :  darkblue;
  border-collapse : separate;
  border-spacing  : 0;
  margin-bottom   : .8em;
  box-sizing      : border-box;
  border          : 0;
  border-top      : 1px solid var(--bordersColor);
  border-right    : 1px solid var(--bordersColor); 
  }
th,td {
  box-sizing     : content-box;
  border         : 0;
  border-left    : 1px solid var(--bordersColor);
  border-bottom  : 1px solid var(--bordersColor);
  width          :  5em;
  padding        : .5em 1em;
  vertical-align : bottom;
} 
td[rowspan="2"] {
  height : 3.4em; 
  }

<table>
  <thead>
    <tr> <th>a</th> <th>b</th> <th>c</th> </tr>
  </thead>
  <tbody>
    <tr> <td>d</td> <td>e</td> <td>f</td> </tr>
    <tr>
      <td rowspan="2"> g </td>
      <td            > h </td>
      <td rowspan="3"> i </td>
    </tr>
    <tr>
      <td rowspan="2"> j </td>
    </tr>
    <tr>
      <td            > k </td>
    </tr>
  </tbody>
</table>