STUDENT ADMIT CARD MODEL IN HTML TABLE
If we create a school project, we need to create a Admit Card that students carry it while attending Exam. In bellow example I have created an Admit Card Model that consists some information of the child or student. In this Admit Card, I have also included exam routine.
Admit Card Model.
To create a Table like above you can use following CSS and HTML TABLE.
<style>
table,td {
border-collapse: collapse;
font-size:15px;}
table,td[id=c] {
border-collapse: collapse;
font-size:12px;}
hr{
margin-top:0px;
margin-bottom:0px;}
font[id=ib]{
font-size:3.5vw;}
.tw{
font-size: 0px;}
.tw:first-letter{
font-size: 10px;}
tr[id=b]{
text-transform: capitalize;
border-bottom:1px solid gray;}
table[class=fr]{
width:555px;
height:200px;
border:1px solid Green;}
img[id=logo]{
transform:50%;}
</style>
<table>
<tr>
<td>
<table class=fr align=center><tr><td><table border=0>
<tr>
<td>
<img id=logo src='https://blogger.googleusercontent.com/img/a/AVvXsEht2jR0LYpoYIwvUviXgX0PPBw2TVtJd9czdK0qjSIavFadQoHhGqBtKfSXrnYEBtHOjRVypkQfbfbL4kXLiiyyzgibPgfcJ64Du6y-KvYiCcPk01KewHfNroX5-9FyLXE6MqoDnOMtE4sMiPu9UzyxxSmpn_e9-gK0E5dNi60IQst-qxVJsmrYG30fAA=s220' width=60px height=62px>
</td>
<td align=center><font>Admit Card</font><br><font align=center id=ib> ISLAMIA PUBLIC SCHOOL BAKHRAUR</font><br><sup style=font-size:9px;>Address:</sup><font size=1> Darul Uloom Islamia Garib Nawaz, Sareya akhteyar Bakhraur,PO-Kahla,Via-Barauli,Dist:Gopalganj-841405.</font>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td width=45% align=left>Enrollment No: <b>425555</b> Class: <b>Nur - A</b> Roll No: <b>58</b>
</td><td width=35% align=center>| <b>First Year Exam-2021-22</b>
</td>
</tr>
</table>
<hr>
<table id=a border=0>
<tr>
<td>
<table border=0 width=482px>
<tr id=b>
<td width=232vw>NAME:<b>Pawan Kumar</b>
</td>
<td width=232vw>DOB: <b>12/12/2015</b> | <b>Gender: Male</b></td>
</tr>
<tr id=b>
<td>F-NAME:<b>Rakesh Yadav</b></td>
<td>M-NAME:<b>Shital Devi</b></td>
</tr>
</table>
<table width=480px border=1 id=c><center><b>EXAM TIME TABLE:</b></center><tr>
<th>DATE</th>
<th>DAY</th>
<th>FIRST SITTING</th>
<th>SECOND SITTING</th>
</tr>
<tr>
<td id=c> 12/10/2020</td>
<td id=c> Friday</td>
<td id=c> Hindi</td>
<td id=c> Math</td>
</tr>
<tr>
<td id=c> 12/10/2020</td>
<td id=c> Friday</td>
<td id=c> Hindi</td>
<td id=c> Math</td>
</tr>
<tr>
<td id=c> 12/10/2020</td>
<td id=c> Friday</td>
<td id=c> Hindi</td>
<td id=c> Math</td>
</tr>
<tr>
<td id=c> 12/10/2020</td>
<td id=c> Friday</td>
<td id=c> Hindi</td>
<td id=c> Math</td>
</tr>
<tr><td id=c> </td>
<td id=c> </td>
<td id=c> </td>
<td id=c> </td>
</tr>
</table>
<table border=0>
<tr> <td width=430px>
<font color=gray> sign & stamp of the principal: sign of the class teacher:<hr></font></br>
</td>
</tr>
</table>
</td>
<td>
<table border=0 width=131px height=180px id=k>
<tr>
<td height=170px><img src="https://blogger.googleusercontent.com/img/a/AVvXsEht2jR0LYpoYIwvUviXgX0PPBw2TVtJd9czdK0qjSIavFadQoHhGqBtKfSXrnYEBtHOjRVypkQfbfbL4kXLiiyyzgibPgfcJ64Du6y-KvYiCcPk01KewHfNroX5-9FyLXE6MqoDnOMtE4sMiPu9UzyxxSmpn_e9-gK0E5dNi60IQst-qxVJsmrYG30fAA=s220" id=k width=130px height=160px>
</td>
</tr>
<tr>
<td height=30px><font color=gray> sign of the student:</font><hr><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center><font face=times size=1px>Date of issue:"+date+" | ℗Power by Imran Websoft Technology.</font></center></td></tr></table><br>"
You can also get data by google sheet and display it class wise that easily can be printed. To know more read other artcle based on this topics.
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
THANKS FOR VISITING CodyLab
Have a nice day!
-------------------------- -------------------------