HTML Table Colspan & Rowspan

HTML Table Colspan

The colspan attribute is used to merge columns in an HTML table. The attribute should be placed between the th and td tags of the table. The number of columns you want to add must be specified within the colspan="" attribute. The columns to be added must be deleted from the table.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <table style="width:100%;border: 1px solid black;">
        <thead>
             <tr>
                <th colspan="3" style="border: 1px solid black;">Customer</th>
            </tr>
            <tr>
                <th style="border: 1px solid black;">Id</th>
                <th style="border: 1px solid black;">Name</th>
                <th style="border: 1px solid black;"> Amount </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="border: 1px solid black;">1</td>
                <td style="border: 1px solid black;">Aenwoer</td>
                <td style="border: 1px solid black;">$252</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td style="border: 1px solid black;"></td>
                <td style="border: 1px solid black;">Total</td>
                <td style="border: 1px solid black;">$252</td>
            </tr>
        </tfoot>
    </table>    
</body>
</html>

Try it Yourself

HTML Table Rowspan

The rowspan attribute is used to merge rows in an HTML table. But the method of merging this row is a little different, A table has three sections like thead,tbody and tfoot.You can't join the row of one section with another section row. When adding rows, the columns of two rows must be equal, not more or less. One thing to remember here is that rows are only added from top to bottom. As many rows as are added to the table, those rows must be deleted from the table.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table style="width:100%;border: 1px solid black;">
        <thead>
            <tr>
                <th style="border: 1px solid black;">ID</th>
                <th style="border: 1px solid black;">NAME</th>
                <th style="border: 1px solid black;">AMOUNT</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2" style="border: 1px solid black;">1</td>
                <td style="border: 1px solid black;">Aenwoer</td>
                <td style="border: 1px solid black;">$20</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">Hwerjko</td>
                <td style="border: 1px solid black;">$10</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td rowspan="2" style="border: 1px solid black;"></td>
                <td style="border: 1px solid black;">Pwesdf</td>
                <td style="border: 1px solid black;">$25</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">Swerlwn</td>
                <td style="border: 1px solid black;">$30</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Try it Yourself