O Level Exam : Practical Question
📝 HTML
🎨 CSS
⚡ Java Script
<!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>
▶ Run Code
🖥 Output: