Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Time-Table Schedule using HTML?
A timetable is an essential tool for organizing daily activities and improving productivity. In this article, you will get to know how to create a simple and effective weekly timetable using HTML. This timetable will include time slots, subjects, and lunch breaks, along with highlighting weekends as holidays.
HTML Tags used to create Time - Table
The main tag used for creating a table is the <table> tag in HTML elements. Tables allow us to represent structured data in rows and columns, which makes them perfect for displaying time schedules.
List of tags required to create a time-table
- HTML <table> tag is used to define a table in HTML. It acts as the main container for all the data and other tags below.
- HTML <tr> stands for table row. It is used to define a single row in a table. Each row is made up of cells that contain table data.
- HTML <th> tag defines the header in the table. By default the text in <th> tag is bold and centered.
- HTML <td> stands for table data. This is the tag where the actual content is placed.
- HTML <colspan> is used with <td> or <th> to span the data along multiple columns.
- HTML <rowspan> is used with or to span the data along multiple rows.
Example
In this example, we will create a title table in HTML. We have used some CSS properties to make the timetable attractive as well.
<!Doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Time-Table Schedule</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
td {
color: red
}
th {
background-color: lightgreen;
}
td {
height: 50px;
}
.subject {
font-weight: bold;
color: green;
}
.holiday {
background-color: lightgrey;
font-weight: bold;
}
.lunch {
background-color: #FFC0CB;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Weekly TimeTable</h1>
<table>
<tr>
<th>Day</th>
<th>9.30-10.30</th>
<th>10.30-11.30</th>
<th>11.30-12.30</th>
<th>12.30-1.30</th>
<th>1.30-2.30</th>
<th>2.30-3.30</th>
<tr>
<th>Monday</th>
<td class="subject">Mathematics</td>
<td class="subject">Science</td>
<td class="subject">English</td>
<td class="lunch" rowspan=5>Lunch Break</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
</tr>
<tr>
<th>Tuesday</th>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
<td class="subject">Mathematics</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Wednesday</th>
<td class="subject">Mathematics</td>
<td class="subject">Hindi</td>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Thursday</th>
<td class="subject">Science</td>
<td class="subject">English</td>
<td class="subject">Social Studies</td>
<td class="subject">Mathematics</td>
<td class="subject">Hindi</td>
</tr>
<tr>
<th>Friday</th>
<td class="subject">English</td>
<td class="subject">Mathematics</td>
<td class="subject">Social Studies</td>
<td class="subject">Hindi</td>
<td class="subject">Science</td>
</tr>
<tr>
<th>Saturday</th>
<td class="holiday" colspan="6">Holiday</td>
</tr>
<th>Sunday</th>
<td class="holiday" colspan="6">Holiday</td>
</tr>
</table>
</body>
</html>
Output
Conclusion
Creating a timetable using HTML is a straightforward process that helps manage daily schedules efficiently. Whether it is for a school, or university, organizing time with clear time slots, breaks, and holidays makes a significant difference in keeping activities on track. By applying simple styling and table properties, you can further enhance the visual appeal and usability of the timetable.
8K+ Views
