A time table or schedule is essential for organizing tasks, events, or classes. We’ll create a basic time-table layout using HTML. A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). In HTML we can use the <table> tag.
Approach to Create Time-Table Schedule
-
HTML Structure: Start with
<html>and</html>tags to encapsulate your HTML document -
Table Creation: Use
<table>and</table>tags to define the table structure -
Adding Rows: Insert rows using
<tr>and</tr>tags within the table -
Inserting Data: Populate cells with data using
<td>and</td>tags within each row - Closing Tags: Ensure all opened tags are properly closed for syntactically correct HTML
-
End HTML Document: Close the
<html>tag to signify the end of the HTML document
Example: In this example code, we have created a basic timetable in HTML without the usage of font color and background colors with the above-explained approach.
<!DOCTYPE html><html>
<head>
<title>Time Table</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
color: #343a40;
}
table {
border-collapse: collapse;
margin: 20px auto;
background-color: #fff;
border: 2px solid #dee2e6;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
th,
td {
border: 1px solid #dee2e6;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
color: #343a40;
}
.highlight {
background-color: #f8f9fa;
}
.special {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>TIME TABLE</h1>
<table>
<tr>
<th>Day/Period</th>
<th>I<br>9:30-10:20</th>
<th>II<br>10:20-11:10</th>
<th>III<br>11:10-12:00</th>
<th>12:00-12:40</th>
<th>IV<br>12:40-1:30</th>
<th>V<br>1:30-2:20</th>
<th>VI<br>2:20-3:10</th>
<th>VII<br>3:10-4:00</th>
</tr>
<tr>
<td class="highlight"><b>Monday</b></td>
<td>Eng</td>
<td>Mat</td>
<td>Che</td>
<td rowspan="6" class="special"><b>LUNCH</b></td>
<td colspan="3" class="special">LAB</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Tuesday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td class="special">SPORTS</td>
</tr>
<tr>
<td class="highlight"><b>Wednesday</b></td>
<td>Mat</td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan="3">LIBRARY</td>
</tr>
<tr>
<td class="highlight"><b>Thursday</b></td>
<td>Phy</td>
<td>Eng</td>
<td>Che</td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
</tr>
<tr>
<td class="highlight"><b>Friday</b></td>
<td colspan="3" class="special">LAB</td>
<td>Mat</td>
<td>Che</td>
<td>Eng</td>
<td>Phy</td>
</tr>
<tr>
<td class="highlight"><b>Saturday</b></td>
<td>Eng</td>
<td>Che</td>
<td>Mat</td>
<td colspan="3">SEMINAR</td>
<td class="special">SPORTS</td>
</tr>
</table>
</body>
</html>
|
Output:
Time-Table Schedule using HTML
We can also add the styling elements such as font color, background color, background image, etc. to the above Time table. The attributes that can be added to the table are:
- align: Aligns left, right, and center.
- border: Sets the border of a table(table border width)
- bgcolor: Sets the background color for a cell or whole table.
- colspan: Sets the number of columns to be spanned.
- rowspan: Sets the number of columns to be spanned.
- cellspacing: Creates space between the cells.
- cellpadding: Creates space within the cells.
- background: Sets the table background with an image.
- width: Sets the width of the table.
- height: Sets the height of the table.
HTML is the foundation of webpages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.