STUDENT RESULT CARD MODEL - HTML TABLE
In following example, I have designed a good looking Result card that contains all required fields to show details of the student. If you like you can use this code in
your project to show the student results.
<style>
input{
font-family:times;
font-size:10px;
margin-top:0.1em;
margin-bottom:0.1em;
}
select{
font-family:times;
font-size:12px;
background:gray;
color:white;
width:200px;
direction:center;
}
table,td {
border-collapse: collapse;
font-size:15px;}
td[id=c] {
border-collapse: collapse;
text-align:center;
font-size:12px;}
hr{
margin-top:0px;
margin-bottom:0px;}
font[id=ib]{
font-size:36px;}
.tw{
font-size: 0px;}
.tw:first-letter{
font-size: 10px;}
tr[id=y]{
font-size: 12px;
border-bottom:1px solid black;
border-top:1px solid black;}
tr[id=b]{
text-transform: uppercase;
font-size: 10px;
border-bottom:1px solid gray;}
table[class=fr]{
width:555px;
height:200px;
border:1px solid green;}
img[id=logo]{
transform:50%;}
td[class=v]{ font-size: 18px;}
</style>
<table>
<tr>
<td>
<table class=fr align=center>
<tr>
<td>
<table border=0>
<tr>
<td>
<img id=logo src=https://sites.google.com/site/mduign/000.png? width=60px height=62px>
</td>
<td align=center>
<font align=center id=ib> ISLAMIA PUBLIC SCHOOL BAKHRAUR</font><br>
<sup style=font-size:9px;>Address:</sup>
<font size=2> Bakhraur jaddi, Post-Kahla, Via-Barauli,Dist-Gopalganj-841405.</font>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td width=45% align=left>Enrollment No: <b>E00025252</b> Class: <b>I - A</b> Roll No: <b>01</b>
</td>
<td width=35% align=center>| <b>First Terminal Examination:2021-22</b>
</td>
</tr>
</table>
<hr>
<table border=0 width=730px>
<tr id=b>
<td width=50%>STUDENT'S NAME:<b>AKRAM ALI</b></td>
<td width=50%>DOB: <b>12/12/2000 (21)</b> | Gender: <b>Male</b>
</td>
</tr>
<tr id=b><td>FATHER'S NAME:<b>Father name</b></td><td>MOTHER'S NAME:<b>Mother name</b>
</td>
</tr>
</tr>
</table>
<table id=a border=0>
<tr>
<td>
<table width=590px border=1 id=c text-align=center;><center><b>-:MARKS SHEET:-</b></center>
<tr>
<th>Srl.</th>
<th width=30%>Subject</th>
<th width=15%>Full marks</th>
<th width=15%>Pass marks</th>
<th width=20%>Obtained marks</th>
<th>Remark</th>
</tr>
<tr>
<td align=right width=25px>1.</td>
<td id=c>Subject</td>
<td id=c>50</td>
<td id=c>15</td>
<td id=c>50</td>
<td> </td>
</tr>
<tr>
<td align=right>2.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>46</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>3.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>56</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>4.</td>
<td id=c>Subject</td>
<td id=c>50</td>
<td id=c>15</td>
<td id=c>35</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>5.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>60</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>6.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>78</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>7.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>78</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>8.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>78</td>
<td id=c> </td>
</tr>
<tr>
<td align=right>9.</td>
<td id=c>Subject</td>
<td id=c>100</td>
<td id=c>30</td>
<td id=c>78</td>
<td id=c> </td>
</tr>
<tr id=y>
<th align=center colspan=2>Total:</th>
<th >800</th>
<th>240</th>
<th colspan=2 >420 (60%)</th>
</tr>
</table>
<table border=0>
<tr>
<td width=570px>
<font color=gray> sign & stamp of the principal: sign of the class teacher:<hr>
</font>
</br></br>
</td>
</tr>
</table>
</td>
<td>
<table border=0 width=131px height=180px id=k>
<tr>
<td height=170px>
<img src="+dataR[i][1]+" id=k width=130px height=160px></td>
</tr>
<tr>
<td height=30px align=center>Enr.No:<mark> E0002 </mark><hr><b>Class: I</b> Roll: <b>01</b><br>Result:<br><b>First Division</b>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<center>
<font face=times size=1px>Date of issue:"+dt+" | ℗Power by Imran Websoft Technology.</font></center>
</td>
</tr>
</table><br>