Monday, November 20, 2017

Uki2 Class 9 - Time Table Exercise

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;
}

.........................................................................................................
By at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)