Web Technology lab

Program 2

Develop the HTML page named as “Table.html” to display your class time table.

a) Provide the title as Time Table with table header and table footer, row-span and col-span etc.
b) Provide various colour options to the cells (Highlight the lab hours and elective hours with different colours.)
c) Provide colour options for rows. 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Time Table</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
        .highlight {
            background-color: #ffcccb;
        }
        .elective {
            background-color: #ccffcc;
        }
    </style>
</head>
<body>

    <h1 style="text-align: center;"> Time Table</h1>
    <table>
        <thead>
            <tr>
                <th>Time</th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>9:00 - 10:00</td>
                <td class="highlight">Lab</td>
                <td>SEPM</td>
                <td>Computer Networks</td>
                <td>Theory of Computation</td>
                <td class="elective">Elective</td>
            </tr>
            <tr>
                <td>10:00 - 11:00</td>
                <td>Computer Graphics</td>
                <td class="elective">Elective</td>
                <td>SEPM</td>
                <td class="highlight">Lab</td>
                <td>NSS</td>
            </tr>
        </tbody>
    </table>

</body>
</html>

Output :-

output
Comments

Replay !

0 Comments

Share Your Thoughts

Please enter your name
Please enter a valid email
Password must be at least 6 characters
Please enter your comment
0/500 characters
Email Verification Required
We've sent a 6-digit verification code to . Please enter the code below to verify your email address.
Email Verified Successfully!
Your email has been verified. Would you like to proceed with posting your comment?

Type "YES" to confirm and post your comment, or click Cancel to skip posting.