Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 learn 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. 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 attribute is used with <td> or <th> to span the data along multiple columns.
-
HTML rowspan attribute is used with <td> or <th> to span the data along multiple rows.
Syntax
Following is the basic syntax for creating a table structure
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
For creating a timetable, we combine these elements with rowspan and colspan attributes to handle merged cells for lunch breaks and holidays.
Creating a Weekly Timetable
Example
Following example creates a comprehensive weekly timetable using HTML table structure with proper styling
<!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;
margin: 20px 0;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
th {
background-color: #90EE90;
font-weight: bold;
}
td {
height: 50px;
}
.subject {
font-weight: bold;
color: green;
}
.holiday {
background-color: #D3D3D3;
font-weight: bold;
}
.lunch {
background-color: #FFC0CB;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 style="text-align: center;">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>
<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>
<tr>
<th>Sunday</th>
<td class="holiday" colspan="6">Holiday</td>
</tr>
</table>
</body>
</html>
The output displays a well-structured weekly timetable with the following features
A table showing: - Green header row with days and time slots - Monday-Friday with subject names in green text - Pink "Lunch Break" cell spanning across all weekdays - Gray "Holiday" cells for Saturday and Sunday spanning all time slots
Key Features of the Timetable
The timetable includes several important features
-
Rowspan for Lunch Break The
rowspan="5"attribute makes the lunch break cell span across all weekdays (Monday to Friday). -
Colspan for Holidays The
colspan="6"attribute makes the holiday cell span across all time slots for weekends. -
Color Coding Different background colors distinguish between regular subjects (green), lunch breaks (pink), and holidays (gray).
-
Responsive Structure The table uses
width: 100%to adapt to different screen sizes.
Simple Timetable Example
Following is a simpler version without advanced styling for basic understanding
<!DOCTYPE html>
<html>
<head>
<title>Simple Timetable</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Class Schedule</h2>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th style="padding: 8px;">Time</th>
<th style="padding: 8px;">Monday</th>
<th style="padding: 8px;">Tuesday</th>
<th style="padding: 8px;">Wednesday</th>
</tr>
<tr>
<td style="padding: 8px;">9:00-10:00</td>
<td style="padding: 8px;">Math</td>
<td style="padding: 8px;">English</td>
<td style="padding: 8px;">Science</td>
</tr>
<tr>
<td style="padding: 8px;">10:00-11:00</td>
<td style="padding: 8px;">Science</td>
<td style="padding: 8px;">Math</td>
<td style="padding: 8px;">English</td>
</tr>
</table>
</body>
</html>
This creates a basic 3-day, 2-time slot timetable without complex styling.
9K+ Views
