Create a table using HTML that shows employee data. Use ROWSPAN to merge rows for repeated departments and COLSPAN for header alignment.

Solution

<!DOCTYPE html>
<html>
<head>
    <title>Employee Data Table</title>
    <style>
        table {
            width: 80%;
            border-collapse: collapse;
            margin: 20px auto;
            text-align: center;
        }

        th, td {
            border: 1px solid #555;
            padding: 10px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        td {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h2 style="text-align:center;">Employee Data</h2>

    <table>
        <!-- Header row spanning multiple columns -->
        <tr>
            <th colspan="4">Company Employee Details</th>
        </tr>

        <!-- Column headers -->
        <tr>
            <th>Department</th>
            <th>Employee Name</th>
            <th>Designation</th>
            <th>Salary</th>
        </tr>

        <!-- Employee data with ROWSPAN for repeated departments -->
        <tr>
            <td rowspan="2">HR</td>
            <td>Alice</td>
            <td>HR Manager</td>
            <td>$5000</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>HR Executive</td>
            <td>$3500</td>
        </tr>

        <tr>
            <td rowspan="3">IT</td>
            <td>Charlie</td>
            <td>Software Engineer</td>
            <td>$6000</td>
        </tr>
        <tr>
            <td>Diana</td>
            <td>System Analyst</td>
            <td>$5500</td>
        </tr>
        <tr>
            <td>Edward</td>
            <td>Developer</td>
            <td>$5000</td>
        </tr>

        <tr>
            <td rowspan="2">Finance</td>
            <td>Fiona</td>
            <td>Accountant</td>
            <td>$4500</td>
        </tr>
        <tr>
            <td>George</td>
            <td>Finance Analyst</td>
            <td>$4800</td>
        </tr>

    </table>

</body>
</html>

Output

Programming Examples

Create a table using HTML that shows employee data. Use ROWSPAN to merge rows for repeated departments and COLSPAN for header alignment.