இந்த கட்டுரையில் HTML codes for designing குறிச்சொற்களைப் பயன்படுத்தி school timetable வடிவமைப்பதற்கான HTML codes பற்றி அறிந்துகொள்வோம்.
இங்கே, school timetable வடிவமைக்க HTML tags மற்றும் CSS ஐப் பயன்படுத்தி உருவாக்குகிறோம். பள்ளி கால அட்டவணை என்பது அனைத்து மாணவர்களுக்கும் ஆசிரியர்களுக்கும் ஒரு குறிப்பு என்ன நேரத்தில் என்ன வகுப்பு இருக்கும் என தெரிந்து கொள்ளலாம். school timetables மாணவர் மற்றும் ஆசிரியர் அட்டவணையின் தெளிவான பார்வையை குறிப்பு என்ன நேரத்தில் class or seminar நடத்தும் நேரம் மற்றும் எளிய வகையில் வார நாட்களில் குறிப்பிட்டு இருக்கும்.
why use school Timetable (பள்ளி கால அட்டவணையை ஏன் பயன்படுத்த வேண்டும்?)
school timetable என்பது நேரத்தை திட்டமிடுதல் மற்றும் அது திட்டமிடுதலின் ஒரு உத்தியாகும் எளிதில் புரிந்துகொள்ளும் வரையில் வடிவமைபாதே நோக்கமாகும். முதலில், மாணவர்கள், ஆசிரியர்கள் மற்றும் நிர்வாகத்தின் பார்வையை கால அட்டவணை ஒதுக்கப்படுகிறது.
வகுப்பறையில் என்ன நடக்கிறது என்பதை நிர்வாகம் தெரிந்துகொள்ளும் ஒரே வழி, இதுவே நிறுவனம், கல்லூரி போன்ற எந்த விதமான முறைகளையும் திட்டமிடுவதற்கான கட்டமைப்பு.
மேலும் பள்ளி கால அட்டவணை, பள்ளி மற்றும் ஆசிரியர்களுக்கு இடையே எதிர்காலத்திற்கான சரியான மற்றும் நேர மேலாண்மையை ஒருங்கிணைக்க உதவுகிறது.
HTML Code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
CSS Code:
<style>
body
{
font-family: 'Poppins', sans-serif;
}
.text-bg-light .card-header
{
background:#ffffff !important;
}
.card-body{
background:#ffffff !important;
}
table th,tr,td{padding:15px !important;}
</style>
HTML Code:
<div class="container py-5">
<div class="card text-bg-light mb-3">
<div class="card-header text-center">Student TimeTable</div>
<div class="card-body">
<table class="table table-striped table-bordered text-center">
<thead class="table-dark">
<tr>
<th scope="col">Time</th>
<th scope="col">8:30-9:30</th>
<th scope="col">9:30-10:30</th>
<th scope="col">10:3-11:30</th>
<th scope="col">11:30-12:30</th>
<th scope="col">12:30-1:30</th>
<th scope="col">1:30-2:00</th>
<th scope="col">3:00-3:30</th>
<th scope="col">3:00-4:00</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td rowspan="5" style="text-aligh:center">L<br>U<br>N<br>C<br>H</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Wesnesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td colspan="3">Computer Lab</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Friday</th>
<td colspan="3">Science Lab</td>
<td>English</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
School Time Table Using TABLE Full Code:
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
body
{
font-family: 'Poppins', sans-serif;
}
.text-bg-light .card-header
{
background:#ffffff !important;
}
.card-body{
background:#ffffff !important;
}
table th,tr,td{padding:15px !important;}
</style>
</head>
<body>
<div class="container py-5">
<div class="card text-bg-light mb-3">
<div class="card-header text-center">Student TimeTable</div>
<div class="card-body">
<table class="table table-striped table-bordered text-center">
<thead class="table-dark">
<tr>
<th scope="col">Time</th>
<th scope="col">8:30-9:30</th>
<th scope="col">9:30-10:30</th>
<th scope="col">10:3-11:30</th>
<th scope="col">11:30-12:30</th>
<th scope="col">12:30-1:30</th>
<th scope="col">1:30-2:00</th>
<th scope="col">3:00-3:30</th>
<th scope="col">3:00-4:00</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td rowspan="5" style="text-aligh:center">L<br>U<br>N<br>C<br>H</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Wesnesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td colspan="3">Computer Lab</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Friday</th>
<td colspan="3">Science Lab</td>
<td>English</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
HTML Table Design Examples
<style>
body
{
font-family: 'Poppins', sans-serif;
}
table th,tr,td{padding:15px !important;}
.table-purple{background:#6c7ae0 !important;color:#fff;}
</style>
</head>
<body>
<div class="container py-5">
<h1 class="text-center py-3">School Time Table using HTML code</h1>
<table class="table table-striped text-center">
<thead class="table-purple">
<tr>
<th scope="col">Time</th>
<th scope="col">8:30-9:30</th>
<th scope="col">9:30-10:30</th>
<th scope="col">10:3-11:30</th>
<th scope="col">11:30-12:30</th>
<th scope="col">12:30-1:30</th>
<th scope="col">1:30-2:00</th>
<th scope="col">3:00-3:30</th>
<th scope="col">3:00-4:00</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Monday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td rowspan="5" style="text-aligh:center">L<br>U<br>N<br>C<br>H</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Tuesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Wesnesday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td colspan="3">Computer Lab</td>
</tr>
<tr>
<th scope="row">Thursday</th>
<td>English</td>
<td>Physics</td>
<td>Maths</td>
<td>Tamil</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
<tr>
<th scope="row">Friday</th>
<td colspan="3">Science Lab</td>
<td>English</td>
<td>Computer</td>
<td>Chemistry</td>
<td>Social</td>
</tr>
</tbody>
</table>
</div>
</body>
