Programming Examples
Create a table using HTML that shows employee data. Use ROWSPAN to merge rows for repeated departments and COLSPAN for header alignment.
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/ Explanation: