If you’re trying to make the entire table the same, then you can use this:

CSS:

  td {
  width: 33.3333%; 
  height: 28px;
  text-align: center;
  text-wrap: none;
  }
  
  tr {
  height: 28px;
  }
  
  table {
  border-collapse: collapse; width: 48.3284%; height: 56px;"
  }

HTML:

<table>
<tbody>
<tr>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>

When you build a table you need to think in table rows. Try to slice up your table, you will see that there are six rows in total and three columns. So it’s probably easier to start with a 6×3 table and add the necessary rowspans later.

When you add rowspan, don’t forget that that cell will expand down, so in the next row (or the one after if rowspan="3") you need to remove that td cell.

Check out the snippet below:

table {
  border: 1px solid;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
}

td {
  border: 1px solid;
  text-align: center;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td rowspan="2">3</td>
  </tr>
  <tr>
    <td>4</td>
    <td rowspan="3">5</td>
  </tr>
  <tr>
    <td rowspan="3">6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td rowspan="2">10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
</table>

How to make this table like the 1st figure? I need to understand not just to make the code, please

I can’t understand why the following code didn’t work:

table,
td,
th {
  border: 2px solid gray;
  text-align: center
}

         <table width="30%">
       <tr>
        <td> 1 </td>
        <td> 2 </td>    
        <td rowspan="4">3</td>
        </tr>

       <tr> 
        <td> 4</td>
        <td rawspan="4">5 </td>
        <td>7 </td>
        </tr>

        <tr>
        <td rowspan="6"> 6 <td>
        <td>9</td>
        <td>8</td>
         </tr>  

         <tr>
        <td>11</td>
        <td>12</td>
        <td rawspan="3">10</td>
         </tr>  
    </table>