How to use multiple rowspan in a table?

Question

I have an issue with rowspan in HTML table and I still didn't configure how to fix my issue
The following image shows what I want to have:

I used the following code but it doesn't give me what I want:

 <table border="1">

    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example</td>
            <td rowspan="2">Title 2 example</td>
            <td rowspan="2">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>
            <td rowspan="1">Title 3 example</td>

            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>
            <td rowspan="1">Title 4 example</td>


        </tr>
    </tbody>
</table>

But it gives me the following table: I don't have any idea what I'm missing?

Answer 1

<tr> represents a row, so if you want 5 rows with "Title 4 example", you'll need 5 <tr>s. In each <tr>, simply ignore the <td>s where a previous one is already there because of its rowspan. Specifying rowspan="1" is never useful (unless you just want to keep it as a reminder to yourself), since it's the default.

<table border="1">
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
            <th>Title 4</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="5">Title 1 example</td>
            <td rowspan="3">Title 2 example</td>
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td rowspan="2">Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <td rowspan="2">Title 2 example</td>
            <!-- Nothing in column 3 -->
            <td>Title 4 example</td>
        </tr>
        <tr>
            <!-- Nothing in column 1 -->
            <!-- Nothing in column 2 -->
            <td>Title 3 example</td>
            <td>Title 4 example</td>
        </tr>
    </tbody>
</table>

You can see the result there: https://jsfiddle.net/eskn6fhz/