How can I split these columns from my table only in certain rows?

I'm new to HTML and would like to create a table that looks like the one in this picture:

Table image

I have a close attempt, but some columns in the middle are merged unlike the table shown in the bottom of the picture. I want my code to have split columns like in that bottom table.

<h6>↓ My Table ↓</h6>
<table border="3">
  <tr align="center">
    <th colspan="7">Element</th>
  </tr>
  <tr>
    <th>I</th>
    <th>II</th>
    <th>III IV V</th>
    <th>VI</th>
    <th>VII</th>
  </tr>
  <tr>
    <td>H</td>
    <td>&nbsp;</td>
    <td rowspan="3">Periyodik Element<br><center>Tablosu</center></td>
    <td>`&nbsp;`</td>
    <td>He</td>
  </tr>
  <tr>
    <td>Li</td>
    <td>Be</td>
    <td>B</td>
    <td>Ne</td>
  </tr>
  <tr>
    <td>Ne</td>
    <td>Mg</td>
    <td>Al</td>
    <td>Ar</td>
  </tr>
  <tr>
    <td>K</td>
    <td>Ca</td>
    <td><center>Sc &nbsp;Ti &nbsp;V</center></td>
    <td>Ga</td>
    <td>Kr</td>
  </tr>
</table>

Solution

The setting you are looking for is the colspan attribute.

In colspan, you can specify how many columns wide a particular column should be. For example, in the cell with the text "Periodic Table of Elements", where you have correctly set the rowspan to be 3 rows high, you should also set the colspan to be 3 columns wide.

Any cell that spans multiple columns in the image should be represented by multiple separate cells in the code. So, instead of entering the "III, IV, and V" cells in one cell, you should enter them in three different cells. Please follow my example to understand the solution.

<h6>↓ My Table ↓</h6>
<table border="3">
  <tr align="center">
    <th colspan="7">Element</th>
  </tr>
  <tr>
    <th>I</th>
    <th>II</th>

    <!-- Added three separated column -->
    <th>III</th>
    <th>IV</th>
    <th>V</th>

    <th>VI</th>
    <th>VII</th>
  </tr>
  <tr>
    <td style="background-color: #FFCBFF;">H</td> <!-- Added background-color -->

    <td>&nbsp;</td>

    <!-- Set colspan (how many column is it) to 3 -->
    <td rowspan="3" colspan="3" style="text-align: center;"> <!-- Added text-align instead of <center> -->
       <p style="margin: 0 4px;">Periyodik Element</p> <!-- Added <p> instead of <br> -->
       <p style="margin: 0 4px;">Tablosu</p> <!-- Added <p> instead of <br> -->
    </td>

    <td>&nbsp;</td>
    <td style="background-color: #FFFDA7;">He</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>Li</td>
    <td>Be</td>
    <td>B</td>
    <td style="background-color: #FFFDA7;">Ne</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>Ne</td>
    <td>Mg</td>
    <td>Al</td>
    <td style="background-color: #FFFDA7;">Ar</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>K</td>
    <td>Ca</td>

    <!-- Added three separated column -->
    <td style="text-align: center;">Sc</td> <!-- Added text-align instead of <center> -->
    <td style="text-align: center;">Ti</td> <!-- Added text-align instead of <center> -->
    <td style="text-align: center;">V</td> <!-- Added text-align instead of <center> -->

    <td>Ga</td>
    <td style="background-color: #FFFDA7;">Kr</td> <!-- Added background-color -->
  </tr>
</table>

More information

<td> colspan attribute - MDN

Use CSS for formatting (ex. text-align: center; or display: block; or font-weight: bold;) instead of HTML elements (ex. <center>, <br>, <strong>, etc.)

What's CSS?

Use class for CSS formatting - MDN