Design Your Class Time-Table Using HTML

on
Hello Friends.!
Welcome to my Blog…!!!
In this post, we will learn about how to design our Class Time-Table using HTML.

We will use following important Tags & Attributes for designing our Class Time-Table.

Tags:
<div></div> = This tag is used to include the section in our HTML Document.
<table></table> = This tag is used to define a Table.
<tr></tr> = This tag is used to define a Table Row.
<th></th> = This tag is used to define a Table Heading.
<td></td> = This tag is used to define a Table Data.
<marquee></marquee> = This tag is used to insert a Scrolling Area of Text.

Attributes:
border = Use to define the Border of the table.
rowspan = This attribute helps in Spanning (Combining) 2 or more Rows.
colspan = This attribute helps in Spanning (Combining) 2 or more Columns. 



<HTML>
<head>
<title>Time-Table</title>
</head>

<body>
<h1 align="center" style="color:#ff9009"><u>Time-Table</u></h1>
<div style="background-color:#e0ffff; color:#000000; padding:30px;">
<table border="3" align="center" width="75%" height="50%">
<tr align="center"><th>Slot</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th></tr>
<tr align="center"><th>1</th><td>OS</td><td>SS</td><td rowspan="2">LAB</td><td>SS</td><td>SS</td><td rowspan="2">LAB</td></tr>
<tr align="center"><th>2</th><td>SS</td><td>AP</td><td>POM</td><td>POM</td></tr>
<tr align="center"><td colspan="7">Recess</td></tr>
<tr align="center"><th>3</th><td>AP</td><td>OS</td><td>WT</td><td>OS</td><td>OS</td><td>AP</td></tr>
<tr align="center"><th>4</th><td>OOPJ</td><td>OOPJ</td><td>OOPJ</td><td>WT</td><td>AP</td><td>WT</td></tr>
<tr align="center"><td colspan="7">Recess</td></tr>
<tr align="center"><th>5</th><td rowspan="2">LAB</td><td rowspan="2">LAB</td><td rowspan="2">LAB</td><td rowspan="2">LAB</td><td rowspan="2">LAB</td></tr>
<tr align="center"><th>6</th></tr>
</table>
<table border="2"  align="center" width="55%" height="20%">
<tr><td><b>Subject Name</b></td><td><b>Subject Teacher</b></td></tr>
<tr><td>Principle Of Management</td><td>Faculty1</td></tr>
<tr><td>Advanced Processors</td><td>Faculty2</td></tr>
<tr><td>Operating System</td><td>Faculty3</td></tr>
<tr><td>System Software</td><td>Faculty4</td></tr>
<tr><td>Object Oriented Programing With JAVA </td><td>Faculty5</td></tr>
<tr><td>Web Technology</td><td>Faculty6</td></tr> 
</table>
<br/>
<b><marquee behavior="scroll" width="100%" direction="left">ThankYou. Made By Prem Khialani &copy;</marquee></b>
</div>
</body>
</html>


Output


Thank-You.

Jai-Hind.

Comments

Post a Comment