Hi, Today we designed our Uki timetable using HTML and Css...
Output of the coding is given below.
The HTML coding is below..
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css"> { /* Linking External CSS file to HTML document */ }
<title>
Uki2 Time Table
</title>
</head>
<body>
<div width="100%">
<table> { Table Tag }
<tr> {1 st Row }
<th class="day">
Time Slot
</th>
<th class="day">
Monday
</th>
<th class="day">
Tuesday
</th>
<th class="day">
Wednesday
</th>
<th class="day">
Thursday
</th>
<th class="day">
Friday
</th>
</tr>
<tr> {2nd Row }
<td class="time">
9-9.30
</td>
<td class="yoga">
Yoga and Meditation
</td>
<td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
<td class="yoga"">
Yoga and Meditation
</td>
<td class="yoga">
Yoga and Meditation
</td>
<td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
</tr>
<tr> [ 3 rd Row ]
<td class="time">
9.30-10
</td>
<td class="yoga">
Touchtyping and Blogging
</td>
<td class="eng" rowspan="2" colspan="2">
English -BC Elementary
</td>
</tr>
<tr> [ 4 th Row ]
<td rowspan="" class="time">
10-12
</td>
<td rowspan="" class="pro">
Programming Theory
</td>
<td rowspan="" class="yoga">
Personal Coaching/Touchtyping and Blogging
</td>
<td rowspan="" class="yoga">
Personal Coaching/Touchtyping and Blogging
</td>
</tr>
<tr> [ 5 th Row ]
<td class="time">
12-1
</td>
<td class="green" colspan="5" style="text-align:center">Lunch Break - Carrom, Badminton </td>
</tr>
<tr> [6 th Row ]
<td class="time">
1-2
</td>
<td class="pro">
Programming Practicals
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
</tr>
<tr> [ 7 th Row ]
<td class="time">
2-4
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
</tr>
<tr> [ 8th Row ]
<td class="time">4.15-5</td>
<td class="green" style="text-align:center" colspan="5">Tea Break</td>
</tr>
<tr>
<td class="time">
4.15-5
</td>
<td class="other">
Tech Talk
</td>
<td class="red">
Toastmasters Gavel Club
</td>
<td class="other">
Team Building
</td>
<td class="other">
Team outing / Tech Movie
</td>
<td class="red">
Toastmasters Gavel Club
</td>
</tr>
</table> [ END OF Table Tag ]
</div>
</body>
</html>
The CSS code for this is
Here are the css codes I have written to create class and declared it on HTML page above..
-----------------------------------------------------------------------------------------------------------------
table, td, th {
border: 1px solid black; [ Creating class with border 1 px solid and in black color.]
border-collapse: collapse; [ Border will joined as single line..]
}
th {
text-align: center;
}
td {
height: 25px;
vertical-align: center;
}
.yoga
{ [ declaring class for Yoga ]
background-color:lightblue;
}
.pro
{
background-color: violet;
}
.eng{ [ declaring class for English class cell ]
background-color:orange;
}
.pcoach{
background-color:lightyellow;
}
.red{
background-color:red;
}
.other
{
background-color:tomato;
}
.day
{
background-color:blue;
}
.time{
background-color:yellow;
}
.green
{
background-color:green;
}
.........................................................................................................
Output of the coding is given below.
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="table.css"> { /* Linking External CSS file to HTML document */ }
<title>
Uki2 Time Table
</title>
</head>
<body>
<div width="100%">
<table> { Table Tag }
<tr> {1 st Row }
<th class="day">
Time Slot
</th>
<th class="day">
Monday
</th>
<th class="day">
Tuesday
</th>
<th class="day">
Wednesday
</th>
<th class="day">
Thursday
</th>
<th class="day">
Friday
</th>
</tr>
<tr> {2nd Row }
<td class="time">
9-9.30
</td>
<td class="yoga">
Yoga and Meditation
</td>
<td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
<td class="yoga"">
Yoga and Meditation
</td>
<td class="yoga">
Yoga and Meditation
</td>
<td class="pcoach" rowspan="2">
Personal Coaching 9.15 to 11.15
</td>
</tr>
<tr> [ 3 rd Row ]
<td class="time">
9.30-10
</td>
<td class="yoga">
Touchtyping and Blogging
</td>
<td class="eng" rowspan="2" colspan="2">
English -BC Elementary
</td>
</tr>
<tr> [ 4 th Row ]
<td rowspan="" class="time">
10-12
</td>
<td rowspan="" class="pro">
Programming Theory
</td>
<td rowspan="" class="yoga">
Personal Coaching/Touchtyping and Blogging
</td>
<td rowspan="" class="yoga">
Personal Coaching/Touchtyping and Blogging
</td>
</tr>
<tr> [ 5 th Row ]
<td class="time">
12-1
</td>
<td class="green" colspan="5" style="text-align:center">Lunch Break - Carrom, Badminton </td>
</tr>
<tr> [6 th Row ]
<td class="time">
1-2
</td>
<td class="pro">
Programming Practicals
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
<td class="pro">
Programming Theory
</td>
</tr>
<tr> [ 7 th Row ]
<td class="time">
2-4
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
<td class="pro">
Programming Practicals Project
</td>
</tr>
<tr> [ 8th Row ]
<td class="time">4.15-5</td>
<td class="green" style="text-align:center" colspan="5">Tea Break</td>
</tr>
<tr>
<td class="time">
4.15-5
</td>
<td class="other">
Tech Talk
</td>
<td class="red">
Toastmasters Gavel Club
</td>
<td class="other">
Team Building
</td>
<td class="other">
Team outing / Tech Movie
</td>
<td class="red">
Toastmasters Gavel Club
</td>
</tr>
</table> [ END OF Table Tag ]
</div>
</body>
</html>
The CSS code for this is
Here are the css codes I have written to create class and declared it on HTML page above..
-----------------------------------------------------------------------------------------------------------------
table, td, th {
border: 1px solid black; [ Creating class with border 1 px solid and in black color.]
border-collapse: collapse; [ Border will joined as single line..]
}
th {
text-align: center;
}
td {
height: 25px;
vertical-align: center;
}
.yoga
{ [ declaring class for Yoga ]
background-color:lightblue;
}
.pro
{
background-color: violet;
}
.eng{ [ declaring class for English class cell ]
background-color:orange;
}
.pcoach{
background-color:lightyellow;
}
.red{
background-color:red;
}
.other
{
background-color:tomato;
}
.day
{
background-color:blue;
}
.time{
background-color:yellow;
}
.green
{
background-color:green;
}
.........................................................................................................
No comments:
Post a Comment