Sample HTML Program for Timetable Creation
Sample 1 Program
<html >
<head>
<title>School Timetable</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background-color: blue; }
h1 { text-align: center; color: white; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; } th,
td { border: 1px solid #333; padding: 10px; text-align: center; } th
{ background-color: pink; color: white; }
tr:nth-child(even) { background-color: pink; }
tr:nth-child(odd) { background-color: white; }
td { font-weight: bold; }
</style>
</head>
<body>
<h1>School Timetable</h1>
<table> <tr> <th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr> <td>8:00 - 9:00</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td>History</td>
<td>Art</td>
</tr>
<tr> <td>9:00 - 10:00</td>
<td>English</td>
<td>Math</td>
<td>Physical Education</td>
<td>Science</td>
<td>Music</td>
</tr>
<tr> <td>10:00 - 11:00</td>
<td>Science</td>
<td>History</td>
<td>Math</td>
<td>English</td>
<td>Physical Education</td>
</tr>
<tr> <td>11:00 - 12:00</td>
<td>History</td>
<td>Art</td>
<td>English</td>
<td>Math</td>
<td>Science</td>
</tr>
<tr> <td>1:00 - 2:00</td>
<td>Art</td>
<td>Science</td>
<td>History</td>
<td>Physical Education</td>
<td>Math</td>
</tr>
</table>
</body>
</html>
Wondershare Filmora is a user-friendly video editing software designed for both beginners and semi-professionals. It offers a wide range of features that make video editing accessible and efficient.
Sample 2 Program
<html>
<head>
<title>Class Timetable</title>
<style>
body {
font-family: sans-serif;
margin: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
img {
border: 2px solid #ccc;
border-radius: 5px;
max-width: 50px;
}
</style>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<thead>
<tr>
<th>Day</th>
<th>Period 1</th>
<th>Period 2</th>
<th>Period 3</th>
<th>Period 4</th>
<th>Period 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>
<td>English</td>
<td>Science</td>
<td><img src="image1.jpg" alt="Image 1"></td>
<td><img src="image2.jpg" alt="Image 2"></td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>Social Studies</td>
<td>Art</td>
<td>Music</td>
<td>Physical Education</td>
</tr>
<tr>
<td>Wednesday</td>
<td>English</td>
<td>Math</td>
<td>Library</td>
<td>Computer Science</td>
<td><img src="image3.jpg" alt="Image 3"></td>
</tr>
<tr>
<td>Thursday</td>
<td>Social Studies</td>
<td>Art</td>
<td>Music</td>
<td>Physical Education</td>
<td>Math</td>
</tr>
<tr>
<td>Friday</td>
<td>Computer Science</td>
<td>Library</td>
<td>Science</td>
<td>English</td>
<td><img src="image4.jpg" alt="Image 4"></td>
</tr>
</tbody>
</table>
</body>
</html>
Sample 3 Program
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
img {
border: 2px solid #000;
width: 100px;
height: auto;
}
</style>
</head>
<body>
<h1>Class Timetable</h1>
<table>
<tr>
<th>Day</th>
<th>8:00 - 9:00</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>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
<td>History</td>
<td>Lunch</td>
<td>Geography</td>
<td>Art</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Math</td>
<td>Science</td>
<td>English</td>
<td>History</td>
<td>Lunch</td>
<td>Geography</td>
<td>Art</td>
</tr>
<tr>
<td>Wednesday </td>
<td>Math</td>
<td>Science</td>
<td>English</td>
<td>History</td>
<td>Lunch</td>
<td>Geography</td>
<td>Art</td>
</tr>
<!-- Add more rows as needed for Thursday & Friday -->
</table>
<h2>Class Photos</h2>
<img src="class_photo1.jpg" alt="Class Photo 1">
<img src="class_photo2.jpg" alt="Class Photo 2">
</body>
</html>