Program 2 · Web Technology Lab

Web Technology Lab · BCSL504 Web Tech (HTML · CSS · JS)

Problem Statement Program 2

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

Provide the title as Time Table with Table Header, Table Footer, Rowspan and Colspan.
Highlight Lab Hours and Elective Hours using different colors.
Apply different colors to table rows.

Web Tech (HTML · CSS · JS) Code Source

Table.html

<!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 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 1 screenshot

VTU Developer

Download the clean, watermark-free output image — ₹1.00