TABLE-BASED LAYOUT IN HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {background-color: pink;}
body {background-color: aqua;margin-left: 95px;margin-right: 95px;border-radius: 5px 40px;}
header h1 {padding: 20px 0px 0px 20px;}
header p {padding-left: 130px;}
nav {background-color: lime;padding:0.0091em;border-radius: 40px;}
nav a {text-decoration: none;color:black;}
nav ul li {padding-left:10px;list-style-type:none;display: inline-block;}
nav ul li ul {padding:5px;list-style-type:none;display: inline-block;}
#hover {width: 15px;height:15px;color:white;float:right;}
#menu {width:100px;display: none;position: absolute;left: auto;color:white;background-color: rgba(255,0,0,0.6);border-radius: 10px;}
#link {padding: 5px;text-align: center;display: block;}
#link:hover {background-color: black;}
#drop:hover #menu {display: block;}
#newmenu {display: none;position: absolute;left: 90px;width: 60px;color:white;background-color:blueviolet;border-radius: 5px;}
.newlink:hover #newmenu {display: block;}
#link a {text-decoration: none;color: white;}
td{ padding: 0px;}
footer table tr td {padding-left: 5px;}
</style>
</head>
<body>
<header>
<h1>Govt. College XYZ </h1>
<p>OFFICIAL WEBSITE</p>
</header>
<br>
<!--**************NAV*****************-->
<center>
<nav style="width:95%;text-align:left;">
<ul>
<li><a href="#"> Home </a></li>
<li id="drop">Admission ▾
<ul id="menu">
<li id="link"><a href="#">FSc</a></li><hr>
<li id="link"><a href="#">F.A</a></li><hr>
<li class="newlink" id="link">BS ▶
<ul id="newmenu">
<li id="link"><a href="#">BSCS</a></li><hr>
<li id="link"><a href="#">BSSE</a></li>
</ul>
</li>
</ul>
</li>
<li id="drop">Departments ▾
<ul id="menu">
<li id="link" class="newlink">Science ▶
<ul id="newmenu">
<li id="link"><a href="#">FSc</a></li><hr>
<li id="link"><a href="#">BSCS</a></li><hr>
<li id="link"><a href="#">BSSE</a></li>
</ul>
</li><hr>
<li id="link" class="newlink">Arts ▶
<ul id="newmenu">
<li id="link"><a href="#">F.A</a></li>
</ul>
</li>
</ul>
</li>
<li id="drop">Gallery ▾
<ul id="menu">
<li id="link"><a href="#">Students</a></li><hr>
<li id="link" class="newlink" ><a href="#">Teachers</a> ▶
<ul id="newmenu">
<li id="link"><a href="#">College</a></li><hr>
<li id="link"><a href="#">Picnic</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<!--**************SECTION*****************-->
<table width="95%" >
<col style="width:33.3%">
<col style="width:33.3%">
<col style="width:33.3%">
<tr>
<td style="margin:50px;padding-top:5px" colspan="2">
<img style="width:780px;height:310px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDSjMYZxJ4XfixJecMFvFZpMRs2OFh138yLlA3NkTCFDTQgoXr">
</td>
<td style="margin:50px;background-color:grey;color:white;">
<h2 style="background-color:brown;color:yellow;padding-left:15px">NEWS</h2>
<marquee scrollamount="3" direction="up" onmouseover="this.stop()" onmouseout="this.start()">
<center>
<p>Meeting Held on 12 of this month</p>
<p>Admission starded For New session</p>
<p>DMCs are available at Office</p>
<p>Like our page
<a href="https://www.facebook.com/bscs.icup" accesskey=_blank>fb.com/bscs.icup </a></p>
<p>Website is updated</p><p></p><p></p>
</center>
</marquee>
</td>
</tr>
<!-- ****************2ND ROW************************ -->
<tr>
<td>
<h2 style="background-color:brown;color:yellow">Principal</h2>
<img style="width:100px;height:100px;float:left;padding-right:10px" src="https://us.123rf.com/450wm/annthegran/annthegran1509/annthegran150902395/44864144-you-entrust-your-childs-education-to-their-teacher-each-day--this-design-is-perfect-for-thanking-the.jpg?ver=6">
<p>The message given by Principal about Acedamic or other things or the details about the Principle of the College goes Here.<br><br>The message given by Principal about Acedamic or other things or the details about the Principle<br> of the College goes Here. </p>
</td>
<td>
<h2 style="background-color:brown;color:yellow">Vice Principal;</h2>
<img style="width:100px;height:100px;float:left" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGS9iJ7rhm-LL1Xbx4OMEFeeT3Enl9h4qr6zL9PT05UMorBS_-">
<p>The message given by Vice Principal about Acedamic or other things or the details about the Vice Principle of the College goes Here.<br><br>The message given by Vice Principal about Acedamic or other things or the details about the vice Principle<br> of the College goes Here. </p>
</td>
<td>
<h2 style="background-color:brown;color:yellow">LINKS</h2>
<center>
<p><button>Button</button> <button>Button</button> <button>Button</button></p>
<p><button>Button</button> <button>Button</button> <button>Button</button></p>
<p><button>Button</button> <button>Button</button> <button>Button</button></p>
<p><button>Button</button> <button>Button</button> <button>Button</button></p>
</center>
</td>
</tr>
</table>
<!--**************FOTTER*****************-->
<footer style="background-color:red;width:95%;">
<table>
<tr><td></td></tr>
<tr>
<td>Home |Admission |Departments |Contact us |Map </td>
</tr>
<tr>
<td style="text-align:center">Layout by using TABLES</td>
</tr>
<tr>
<td style="text-align:center">Coding by NA?SH</td>
</tr>
</table>
</footer>
</center>
</body>
</html>
0 Comments