Scribd
Upload
42 views6 pages

Class Timetable HTML Design

Uploaded by

Shodhan Kumar Shetty
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
42 views6 pages

Class Timetable HTML Design

Uploaded by

Shodhan Kumar Shetty
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. 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 colors.)
c) Provide colour options for rows.

<!DOCTYPE html>

<head>

<title>Time Table | vtucode</title>

<style>
body {
font-family: Arial, sans-serif;
}

table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}

th,
td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}

th {
background-color: #f4f4f4;
color: #333;
}

tr:nth-child(even) {
background-color: #f9f9f9;
}

tr:nth-child(odd) {
background-color: #e6f7ff;
}

.lab-hour {
background-color: #ffcccc;
}

.elective-hour {
background-color: #ccffcc;
}

.highlight {
font-weight: bold;
color: #d63384;
}

tfoot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>

<body>

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

<table>
<thead>
<tr>
<th>Day/Time</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>Lunch Break</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td class="lab-hour">Physics Lab</td>
<td>Elective</td>
<td rowspan="5" class="highlight">Break</td>
<td class="elective-hour">Elective</td>
<td>History</td>
</tr>
<tr>
<td>Tuesday</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
<td class="lab-hour">Chemistry Lab</td>
<td>Geography</td>
<td>PE</td>
</tr>
<tr>
<td>Wednesday</td>
<td>History</td>
<td class="lab-hour">Computer Lab</td>
<td>English</td>
<td>Math</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
</tr>
<tr>
<td>Thursday</td>
<td>PE</td>
<td>History</td>
<td>Geography</td>
<td class="elective-hour">Elective</td>
<td>Biology</td>
<td>Math</td>
</tr>
<tr>
<td>Friday</td>
<td class="lab-hour">Biology Lab</td>
<td>Math</td>
<td>English</td>
<td>Physics</td>
<td class="elective-hour">Elective</td>
<td>Chemistry</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="8">End of Timetable</td>
</tr>
</tfoot>
</table>

</body>

</html>

Common questions

Powered by AI

The document uses semantic HTML tags like <thead>, <tbody>, and <tfoot> to clearly delineate the different parts of the table, such as headers, body content, and footer. This improves both readability and accessibility as it helps screen readers and other assistive technologies process the content structure correctly. Semantic HTML also helps with SEO, making the document more understandable to search engines .

The table's current design does not inherently support mobile responsiveness, as it uses fixed widths and styles that could lead to overflow or loss of usability on smaller screens. To improve this, media queries could be utilized to adjust the table layout based on screen size, implementing fluid grids or stacking cells vertically for narrow devices. Alternatively, using frameworks like Bootstrap could provide better out-of-box responsive capabilities .

Inline CSS, like the text-align style used in the <h1> tag, offers a quick and easy way to apply styles when needed for unique elements. This can be beneficial when a specific style is only relevant to a single instance or when styles must be overridden. However, it can reduce maintainability and scalability, as inline styles take precedence over external or internal stylesheets, making global changes cumbersome. Furthermore, inline styles contribute to cluttered HTML, mixing style with content, which goes against the separation of concerns principle in web design .

The document defines the visual design by using CSS to style the HTML timetable. It specifies a font-family of Arial for the body, sets a width of 80% for the table, and uses border-collapse for the table cells. Different colors are used for headers (background color #f4f4f4, text color #333), alternating row colors (even rows #f9f9f9, odd rows #e6f7ff), and specific backgrounds for lab hours (#ffcccc) and elective hours (#ccffcc). The break during lunch is highlighted with bold and colored text (#d63384). The footer is styled with a background of #e0e0e0 and bold text .

The <tfoot> section is used to define a footer for the HTML table. It typically includes totals or summary information. In this document, it contains the text 'End of Timetable', which provides a clear ending point for the table content, enhancing clarity for users .

Color coding in the timetable serves as an intuitive means for users to visually distinguish between different types of activities like labs and electives, enhancing quick comprehension and interaction. Each type's unique color allows for easier scanning of information, reducing cognitive load. However, for optimal effectiveness, it's crucial to ensure colors are accessible by choosing combinations that offer high contrast and are discernible by colorblind individuals .

Enhancing aesthetics and usability can be achieved by adopting a more modern design approach using subtle aesthetics like hover states for interactivity or integrating icons next to the subject names for quick visual reference. Functionality can be improved by enabling users to filter or search for specific classes or labs. Moreover, adopting a design system palette could streamline color choices for accessibility, ensuring high contrast for readability .

The HTML table uses semantic tags like <thead>, <tbody>, and <tfoot> which is a good practice. However, scalability could be improved by using CSS classes more extensively for all heading and data cells, reducing the inline style 'text-align' within every <th> and <td>. This can make future changes easier by only editing CSS stylesheets. Furthermore, using more semantic HTML5 tags and considering frameworks like ARIA for accessibility could enhance maintainability and make future feature additions smoother .

The 'rowspan' attribute allows a single table cell to span multiple rows, as seen in the 'Lunch Break' cell, which spans 5 rows. Similarly, 'colspan' would allow a cell to span multiple columns, though it is not used in this specific document. These attributes help in organizing content efficiently within a table structure .

Using CSS classes such as .lab-hour and .elective-hour enhances accessibility by visually differentiating specific types of schedule segments, which can help users quickly identify lab and elective periods. However, from an accessibility perspective, relying solely on color to convey information can be problematic for colorblind users. Adding text indicators or icons alongside the color changes would improve accessibility for those with visual impairments, enhancing overall user experience .

You might also like