How to use multiple rowspan in a table?-CodePudding

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?

CodePudding user response：

Here's your exact table format as per the image you've added,

 <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="11">Title 1 example</td>
            <td rowspan="6">Title 2 example</td>
            <td rowspan="3">Title 3 example</td>
            <td rowspan="1">Title 4 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="3">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 5 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 6 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 7 example</td>
            <td rowspan="1">Title 8 example</td>
            <td rowspan="1">Title 9 example</td>
        </tr>
        <tr>
            <td rowspan="4">Title 10 example</td>
            <td rowspan="3">Title 11 example</td>
            <td rowspan="1">Title 12 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 13 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 14 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 15 example</td>
            <td rowspan="1">Title 16 example</td>
        </tr>
        <tr>
            <td rowspan="7">Title 17 example</td>
            <td rowspan="6">Title 18 example</td>
            <td rowspan="4">Title 19 example</td>
            <td rowspan="1">Title 20 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 21 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 22 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 23 example</td>
        </tr>
        <tr>
            <td rowspan="2">Title 24 example</td>
            <td rowspan="1">Title 25 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 26 example</td>
        </tr>
        <tr>
            <td rowspan="1">Title 27 example</td>
            <td rowspan="1">Title 28 example</td>
            <td rowspan="1">Title 29 example</td>
        </tr>
    </tbody>
</table>

The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.

Usage: It can be used with <td> and <th> element in an HTML Table.

Attribute Values: It contains a value i.e number Which specifies the number of rows that a table cell should span.

<td>: The rowspan attribute when used with <td> tag determines the number of standard cells it should span.

Reference Geeksforgeeks

CodePudding user response：

<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/