Ex No: 4 CLASS TIME TABLE
Aim: To design a webpage to display Class Time Table using different CSS border proeprty.
Algorithm
Step1: Create a folder “Ex4” to place all the HTML files.
Step2: Create HTML file “index.html”.
Step3: Use HTML <table> tag to create Time Table and add necessary CSS property.
HTML Tag Description
<header> Specify title and heading
<article> Represent an article
<section> Specify the content of a section
<table> Display data in table format
<h> Define header text
CSS Property Description
background-color Specify background color
text-align Align text in an element
border Specify border property
transition Provide smooth Transition on CSS property
hover Pseudo Class activate when mouse over an element
border-radius Specify rounded corner radius
border-collapse Combine multiple border into single border
width, height Specify width and height value
writing-mode Specify text direction and orientation
font-size Specify size of the font
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Time Table</title>
	<style>
	  header {
		text-align:center;
		height: 100px;
		background-color: lightgray;
		padding: 10px;
		border-radius: 10px 10px 0px 0px;
	  }
	  nav{
		background-color: lightgray;
		text-align:left;
		font-size:15px;
	  }
	  footer {
		text-align:center;
		font-size: 12px;
		height: 50px;
		line-height: 50px;
		background-color: lightgray;
		padding: 10px;
		border-radius: 10px;
	  }
	  article{
		width: auto;
		border: 2px solid gray;
		padding: 10px;
		border-radius: 10px;
		margin:5px;
		overflow-x: auto;
	  }
	  table, tr, th, td{
		margin: auto;
		padding: 10px;
		text-align: center;
		border-collapse: collapse;
		border: 1px solid black;
	  }
	  .day{
		text-align:left;
		font-size:18px;
		font-style:italic;
		font-weight: bold;
	  }
	  .pract{
		border: double red;
		text-align: center;
		transition: background-color 2s;
	  }
	  .pract:hover{
	    background-color: gold;
	  }
	  .vtext{
		writing-mode: vertical-lr;
		width: 15px;
		padding: 5px;
	  }
	</style>
  </head>
  <body>
    <header>
	  <h1>Class Time Table</h1>
	</header>
	<article>
	  <table>
	    <tr>
		  <th>Day</th>
		  <th>09:00-10:00 AM</th>
		  <th>10:00-11:00 AM</th>
		  <th>11:00-12:00 AM</th>
		  <th>12:00-01:00 PM</th>
		  <th rowspan="6" class="vtext">Lunch Break</th>
		  <th>01:30-02:30 PM</th>
		  <th>02:30-03:30 PM</th>
		  <th>03:30-04:30 PM</th>
		</tr>
		<tr>
		  <td class="day">Monday</td>
		  <td>C Prog</td>
		  <td class="pract" colspan="3"> C Practical</td>
		  <td>OS</td>
		  <td>BEEE</td>
		  <td>OS</td>
		</tr>
		<tr>
		  <td class="day">Tuesday</td>
		  <td class="pract" colspan="2">BEEE Lab</td>
		  <td>C Prog</td>
		  <td>OS</td>
		  <td class="pract" colspan="2">OS Lab</td>
		  <td>BEEE</td>
		</tr>
		<tr>
		  <td class="day">Wednesday</td>
		  <td>BEEE</td>
		  <td class="pract" colspan="2">Computer Application Lab</td>
		  <td>C Prog</td>
		  <td class="pract" colspan="2">BEEE Lab</td>
		  <td>OS</td>
		</tr>
		<tr>
		  <td class="day">Thursday</td>
		  <td class="pract" colspan="3">C Practical</td>
		  <td>C Prog</td>
		  <td class="pract" colspan="2">Computer Application Lab</td>
		  <td>BEEE</td>
		</tr>
		<tr>
		  <td class="day">Friday</td>
		  <td>Seminar</td>
		  <td class="pract" colspan="2">OS Lab</td>
		  <td>C Prog</td>
		  <td>OS</td>
		  <td>BEEE</td>
		  <td>C Prog</td>
		</tr>
	  </table>
	</article>
	<footer>
	  Developed by K Anbarasan
	</footer>
  </body>
</html>
Result: Thus a webpage is designed to display Class Time Table using different CSS border proeprty.