How can I build the table with rowspan-CodePudding

I have to make a table, but I don't know how to build it, I've try a lot, but I can't. I want to make a table like this -->

enter image description here

But I can only do this -->

enter image description here

I want the f cell to merge the two cells down, in the left middle of the b cell and the g cell. How can I solve ? THANKS !!!

Here is my code:

table, td {
    border:2px solid black;
    border-collapse: collapse;
}

td{
    height: 10px;
    width: 200px;
    vertical-align: top;
    line-height: 25px;
}

td.a{
    text-align: center;
    vertical-align: top;
}

td.b{
    text-align: left;
    vertical-align: bottom;
}

td.c{
    text-align: left;
    vertical-align: middle
}

<table align="center">
  <tr>
      <td>a</td>
      <td  rowspan="3">b</td>
      <td>c</td>
  </tr>
  <tr>
      <td>d</td>
      <td  rowspan="3">e</td>
  </tr>
  <tr>
      <td  rowspan="2">f</td>
  </tr>
  <tr>
      <td  rowspan="2">g</td>
  </tr>
  <tr>
      <td>h</td>
      <td>i</td>
  </tr>
 </table>

CodePudding user response：

Better to use grid but if you really wan to use table, you will need to fix a height to your tr, otherwise you wont see any difference:

tr{
  height: 25px;
}

And if you really want to that the height fit with your image, you can double height on the fourth row:

tr:nth-child(4){
  height: 50px;
}

DEMO

table, td {
    border:2px solid black;
    border-collapse: collapse;
}
tr{
  height: 25px;
}
tr:nth-child(4){
  height: 50px;
}
td{
    height: 10px;
    width: 200px;
    vertical-align: top;
    line-height: 25px;
}

td.a{
    text-align: center;
    vertical-align: top;
}

td.b{
    text-align: left;
    vertical-align: bottom;
}

td.c{
    text-align: left;
    vertical-align: middle
}

<html>
  <head>
      <title>Table</title>
    <style>    </style>
  </head>
  <body>
      <table align="center">
        <tbody>
          <tr>
              <td>a</td>
              <td  rowspan="3">b</td>
              <td>c</td>
          </tr>

          <tr>
              <td>d</td>
              <td  rowspan="3">e</td>
          </tr>

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

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

          <tr>
              <td>h</td>
              <td>i</td>
          </tr>
        <tbody>
      </table>
  </body>
</html>

CodePudding user response：

I recommend you to use CSS-Grid to specify the rows and columns and then use grid-row property on the the item you want to span to other row it will make your task easier. Make sure you have enough rows available in your table to span one row item to other line.