Scribd
Upload
2 views

Prog-2

The document outlines the creation of an HTML page titled 'Timetable' that displays a class timetable using a structured table format. It includes features such as row-span, colspan, and color coding for lab and elective hours. The CSS styles enhance the visual presentation of the table, ensuring clarity and organization.

Uploaded by

nareshnachi10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Prog-2

The document outlines the creation of an HTML page titled 'Timetable' that displays a class timetable using a structured table format. It includes features such as row-span, colspan, and color coding for lab and elective hours. The CSS styles enhance the visual presentation of the table, ensuring clarity and organization.

Uploaded by

nareshnachi10
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Prog 2. Develop the HTML page named as “Table.

html” to display
your class timetable.

a) Provide the title as Timetable with table header


and table footer, row-span and colspan 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Time Table</title>

<style>
/* Step 1: CSS styles to format the table */
body {
font-family: Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: center;
border: 1px solid #000;
}
th {
background-color: #f4b41a;
}
tfoot td {
background-color: #f4b41a;
font-weight: bold;
}
.lab-hour {
background-color: #a2d5f2;
}
.elective-hour {
background-color: #c3f584;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
tbody tr:nth-child(odd) {
background-color: #e6e6e6;
}
</style>
</head>

<body>

<h2 style="text-align: center;">Class Time Table</h2>

<table>
<!-- Step 2: Create the Table Structure -->
<thead>
<tr>
<th>Time/Day</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>

<!-- Step 3: Populate the Table Body -->


<tbody>
<tr>
<td>9:00 - 10:00</td>
<td>Software Engineering</td>
<td rowspan="2" class="lab-hour">Web Lab</td>
<td>Artificial Intelligence</td>
<td>Computer Networks</td>
<td>Research Methodology</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Computer Networks</td>
<td>Research Methodology</td>
<td class="elective-hour">Elective</td>
<td>Artificial Intelligence</td>
</tr>

<tr>
<td>11:00 - 11:15</td>
<td colspan="5">Tea Break</td>
</tr>

<tr>
<td>11:15 - 12:15</td>
<td rowspan="2" class="lab-hour">Mini Project</td>
<td>Research Methodology</td>
<td>Artificial Intelligence</td>
<td>Theory of Computation</td>
<td class="elective-hour">Elective</td>
</tr>
<tr>
<td>12:15 - 1:15</td>
<td>Computer Networks</td>
<td>Theory of Computation</td>
<td>Artificial Intelligence</td>
<td>NSS</td>
</tr>
<tr>
<td>1:15 - 2:00</td>
<td colspan="5">Lunch Break</td>
</tr>
<tr>
<td>2:00 - 3:00</td>
<td>Artificial Intelligence</td>
<td>Theory of Computation</td>
<td class="lab-hour">Yoga</td>
<td>Artificial Intelligence</td>
<td class="elective-hour">Elective</td>
</tr>
<tr>
<td>3:00 - 4:00</td>
<td>Physical Education</td>
<td>Environmental Studies</td>
<td>NSS</td>
<td>Yoga</td>
<td>Tutorial</td>
</tr>
</tbody>

<!-- Step 4: Add Table Footer -->


<tfoot>
<tr>
<td colspan="6">End of Timetable</td>
</tr>
</tfoot>
</table>

</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy