Design Time Table of your department and highlight most important periods.

HTML CodeTry it

<!-- Design Time Table of your department and highlight most important periods. --> 

<body>
   <div>
      <div class="table">
         <h1>Time Table</h1>
         <div>
            <table>
               <tr>
                  <th rowspan="2"></th>
                  <th>1st Lecture</th>
                  <th>2nd Lecture</th>
                  <th>3rd Lecture</th>
                  <th>4th Lecture</th>
                  <th rowspan="2">12:30-1:05</th>
                  <th>5th Lecture</th>
                  <th>6th Lecture</th>
               </tr>
               <tr>
                  <th>9:30-10:15</th>
                  <th>10:15-11:00</th>
                  <th>11:00-11:45</th>
                  <th>11:45-12:30</th>
                  <th>1:05-1:50</th>
                  <th>1:50-2:35</th>
               </tr>
               <tr>
                  <th>Monday</th>
                  <td>Web Technology</td>
                  <td>Information Security & cyber laws</td>
                  <td></td>
                  <td><mark>Linux Administration</mark></td>
                  <td rowspan="6"><span class="vertical">Lunch Break</span></td>
                  <td>Design & Analysis of Algorithms</td>
                  <td></td>
               </tr>
               <tr>
                  <th>Tuesday</th>
                  <td>Information Security & cyber laws</td>
                  <td></td>
                  <td><mark>Linux Administration</mark></td>
                  <td>Design & Analysis of Algorithms</td>
                  <td></td>
                  <td>Advanced Java</td>
               </tr>
               <tr>
                  <th>Wednesday</th>
                  <td>Design & Analysis of Algorithms</td>
                  <td></td>
                  <td><mark>Linux Administration</mark></td>
                  <td></td>
                  <td>Advanced Java</td>
                  <td></td>
               </tr>
               <tr>
                  <th>Thursday</th>
                  <td>Information Security & cyber laws</td>
                  <td></td>
                  <td>Advanced Java</td>
                  <td></td>
                  <td><mark>Linux Administration</mark></td>
                  <td></td>
               </tr>
               <tr>
                  <th>Friday</th>
                  <td></td>
                  <td>Advanced Java</td>
                  <td></td>
                  <td>Information Security & cyber laws</td>
                  <td>Web Technology</td>
                  <td></td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</body>

CSS CodeTry it

body{
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.table{
   padding: 10px;
}
.table h1{
   padding: 10px;
}
.table div table tr th, .table div table tr td{
   border: 1px solid black;
   padding: 2px;
}
.table div table tr td{
   text-align: center;
}
.vertical{
   writing-mode: vertical-rl;
   padding-right: 30px;
   padding-left: 30px;
   font-size: 24px;
}

OutputTry it

Comments

Popular posts from this blog

PHP Code to print first 10 Fibonacci Numbers

Create a simple HTML page to demonstrate the use of different tags

Use Tables to provide layout to your web page.