Laboratory Experiment - 2
- Get link
- X
- Other Apps
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.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1, h3, h4 {
text-align: center;
}
table {
width: 100%;
margin: 20px auto;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 10px;
font-size: 14px;
}
th {
background-color: #4CAF50; /* Header background color */
color: white;
}
td {
background-color: #f9f9f9; /* Light background for table cells */
}
/* Styling for Lab Hours */
.lab {
background-color: #ffeb3b; /* Yellow for lab hours */
}
/* Styling for Proctor Meeting */
.proctor {
background-color: #f44336; /* Red for proctor meetings */
color: white;
}
/* Styling for Club Activities */
.club {
background-color: #2196F3; /* Blue for club activities */
color: white;
}
/* Break Styling */
.break {
background-color: #e0e0e0; /* Gray for break row */
font-weight: bold;
}
/* Footer and other text styling */
tfoot td {
font-weight: bold;
}
</style>
</head>
<body>
<h1>Department of Computer Science & Engineering</h1>
<h3>Time Table</h3>
<h4>Branch: Computer Science & Engineering Semester: V Section: A Venue: CRC 206 Academic Year: 2024-25 (ODD)</h4>
<table>
<thead>
<tr>
<th>Day</th>
<th>09:00 AM To 10:00 AM</th>
<th>10:00 AM To 11:00 AM</th>
<th>11:15 AM To 12:15 PM</th>
<th>12:15 PM To 01:15 PM</th>
<th>02:00 PM To 03:00 PM</th>
<th>03:00 PM To 04:00 PM</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>BCS503[T]</td>
<td>BCS502[L]</td>
<td>BCS515B[L]</td>
<td>BCS501[L]</td>
<td>BCS503[L]</td>
<td class="club">Spark-IT Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Tuesday</td>
<td>BCS501[L]</td>
<td>BCS515B[L]</td>
<td>BCS503[L]</td>
<td>BRMK557[L]</td>
<td>BCS502[L]</td>
<td class="proctor">PROCTOR MEETING</td> <!-- Proctor meeting in red -->
</tr>
<tr>
<td>Wednesday</td>
<td>BCS503[T]</td>
<td>BRMK557[L]</td>
<td>BCS515B[L]</td>
<td>BCS501[L]</td>
<td>BCS502[L]</td>
<td class="club">Open Source Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Thursday</td>
<td>BRMK557[T]</td>
<td>BCS503[T]</td>
<td class="lab" colspan="2">Batch A1: BCS502/Jupiter-1 Lab<br>Batch A2: BCSL504/Jupiter-2 Lab</td> <!-- Lab session in yellow -->
<td>BESK508[L]</td>
<td class="club">AICTE Activity Point Program</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Friday</td>
<td>BCS501[L]</td>
<td>BRMK557[T]</td>
<td class="lab" colspan="2">Batch A1: BCS502/Jupiter-1 Lab<br>Batch A2: BCSL504/Jupiter-2 Lab</td> <!--
Lab session in yellow -->
<td>BESK508[L]</td>
<td class="club">Cultural Club Activity</td> <!-- Club activity in blue -->
</tr>
<tr>
<td>Saturday</td>
<td colspan="6">BCS586 [Mini Project]</td>
</tr>
<tr class="break">
<td colspan="7">Tea Break: 11:00 AM to 11:15 AM | Lunch Break: 1:15 PM to 2:00 PM
L: Lecture T: Tutorial P: Practical</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
- Basic
HTML Structure:
- The
code starts with a standard HTML structure, including the DOCTYPE, html, head,
and body tags.
- Inside
the head, the meta tag ensures proper character encoding and responsive
design for mobile devices.
- The style tag contains all the CSS used to style the timetable.
- CSS
Styling:
- The
timetable is styled with CSS to ensure it's visually appealing and
easy to understand.
- Table
Header Styling:
- The
headers (day, time slots) are styled with a green background (#4CAF50)
and white text to make the headings stand out.
- Table
Data Styling:
- Each
cell has a light background (#f9f9f9) for a clean, neutral look.
- Lab
Hours:
- Lab
sessions are highlighted in yellow (#ffeb3b) to indicate they are
practical, hands-on hours.
- Proctor
Meeting:
- The
proctor meeting on Tuesday is highlighted in red (#f44336) with
white text to make it stand out as a special event in the schedule.
- Club
Activities:
- Different
club activities (like Spark-IT Club, Open Source Club, AICTE Activity,
Cultural Club) are highlighted in blue (#2196F3) with white text,
differentiating them from regular classes.
- Break
Styling:
- Tea
break and lunch break are marked with a gray background to
indicate non-class hours. These breaks help in understanding the daily
structure of the schedule.
- Table
Layout:
- The
table is divided into several columns representing the time slots for
each day, starting from 9:00 AM and ending at 4:00 PM.
- Each
day of the week has its own row, and the relevant subjects are placed in
their respective time slots.
- On Thursday
and Friday, the lab sessions are merged into two-hour blocks
using the colspan="2" attribute, indicating that both theory
and lab are combined for these slots.
- Break
Times:
- Below
the table, there's a row that provides the timings for the tea break
(from 11:00 AM to 11:15 AM) and the lunch break (from 1:15 PM to
2:00 PM). This helps to clearly indicate when breaks occur during the
day.
- Footer:
- The
footer of the table includes an explanation of the symbols used: L for Lecture,
T for Tutorial, and P for Practical.
Visual Enhancements:
- Colors:
Various colors are used to differentiate between different types of
sessions and activities, making the timetable easier to navigate:
- Green
for headers.
- Yellow
for lab hours.
- Red
for proctor meetings.
- Blue
for club activities.
- Gray
for breaks.
This color-coding ensures that students and staff can
quickly identify important sessions and breaks throughout the day.
This code can be easily customized by changing the subject names, time slots, or colors to match your specific needs.
Viva-voce Questions:
1. What is the main purpose of this HTML program?
Expected Answer: The
program is designed to create a class timetable that visually displays lecture,
lab, and club activity schedules using HTML and CSS.
Expected Answer:
The document starts with a `<!DOCTYPE html>`, followed by an `html` tag,
and contains `head` (for metadata and styles) and `body` (for the content)
sections.
Expected Answer:
The main sections include the header (Department and academic details), table
structure (days and time slots), and additional activities like club events and
breaks.
Expected Answer:
The table is created using the `<table>`, `<thead>`,
`<tbody>`, `<tr>`, `<th>`, and `<td>` tags, with each
row representing a day of the week and columns representing different time
slots.
Expected Answer:
Each time slot is represented as columns in the table header using `<th>`
tags (e.g., 09:00 AM to 10:00 AM, 10:00 AM to 11:00 AM, etc.).
Expected Answer:
The `colspan` attribute is used to merge two columns into one cell for sessions
that span multiple time slots (e.g., lab sessions that last for two hours).
Expected Answer:
Lab sessions are visually highlighted in **yellow** using the `.lab` class in
CSS. In the HTML code, lab sessions are indicated with `colspan="2"`
to span across two time slots.
Expected Answer:
CSS is used to style the timetable by adding colors, spacing, and text
alignment. It also makes the timetable more visually appealing and easy to
navigate.
Expected Answer: The
headers are styled using a green background (`#4CAF50`) with white text for
better visibility, applied via CSS rules in the `<style>` section.
Expected Answer:
Proctor meetings are highlighted in **red** with white text using the
`.proctor` class to make them stand out as special events in the timetable.
Expected Answer:
The `.club` class is used to visually distinguish club activities by applying a
**blue background** (`#2196F3`) and white text.
Expected Answer:
Breaks are placed in a separate row with a gray background (`#e0e0e0`) to
indicate non-class hours. The break timings are displayed as text in a
`<td>` cell that spans all columns using `colspan="7"`.
Expected Answer:
The `thead` defines the table header, the `tbody` contains the body content
(day-wise timetable), and the `tfoot` is used for the footer, explaining what
`L`, `T`, and `P` represent.
Expected Answer:
The `.break` class is applied to the row that displays the tea and lunch
breaks. It uses gray background styling to differentiate the break periods from
regular timetable entries.
Expected Answer:
Club activities like Spark-IT, Open Source, and Cultural Club are placed in
specific time slots using the `.club` class and are highlighted with blue
background styling for easy identification.
Expected Answer:
CSS classes like `.lab`, `.proctor`, and `.club` are used to apply different
colors and styles to lab sessions, proctor meetings, and club activities. These
classes ensure visual separation between different types of events.
Expected Answer:
These tags are used for headings. The `h1` tag is for the main title
(Department name), `h3` for the timetable heading, and `h4` for branch,
semester, section, venue, and academic year details.
Expected Answer:
The `border-collapse` property in CSS ensures that the table's borders are
collapsed into a single border for adjacent cells, providing a cleaner, more
compact look.
Expected Answer:
Inline CSS is used here for simplicity and ease of demonstration in a single
HTML file, but external stylesheets could be used for larger projects for
better organization and reusability.
Expected Answer:
To modify the timetable, I would update the subject codes, timings, or club
activity details in the table cells (`<td>`) while maintaining the
overall structure. The timetable can be customized by adjusting content as
needed.
- Get link
- X
- Other Apps
Comments
Post a Comment