1.The html table is defined with the <table> tag.
2.Each table row is defined with the <tr> tag.
3.A table header is defined with the <th> tag.
4.By default, table headings are bold and centered.
5.A table data/cell is defined with the <td> tag.
FOR EXAMPLE:-
<html> <head> <title>marksheet</title> <script> function myfun() { var a =document.form1.txtins.value; document.getElementById("demoins").innerhtml=a; var b=document.form1.txtbname.value; document.getElementById("demob").innerhtml=b; var c=document.form1.txtstu.value; document.getElementById("demostu").innerhtml=c; var d=document.form1.txtfname.value; document.getElementById("demof").innerhtml=d; var e=document.form1.txtm.value; document.getElementById("demom").innerhtml=e; var f=document.form1.txtw.value; document.getElementById("demow").innerhtml=f; var g=document.form1.txto.value; document.getElementById("demoot").innerhtml=g; var h=document.form1.txtc.value; document.getElementById("democp").innerhtml=h; var i=document.form1.txtd.value; document.getElementById("demod").innerhtml=i; var p =eval(parseFloat(document.form1.txto.value)+parseFloat(document.form1.txtw.value)+parseFloat(document.form1.txtd.value)+parseFloat(document.form1.txtc.value)+parseFloat(document.form1.txtm.value));
document.getElementById("demogt").innerhtml=p; var k=eval(parseFloat(p*100)/250); document.getElementById("demoper").innerhtml=k+"%"; if(a>=50 && b>=50 && c>=50 && d>=50 && e>=50 && f>=50 && g>=50 && h>=50 && i>=50) { document.write("<h1>sum is not possible</h1>"); } else { switch(true) { case(a>=50): alert("Enter marks is greater than 50"); break; case(b>=50): alert("Enter marks is greater than 50"); break; case(c>=50): alert("Enter marks is greater than 50"); break; case(d>=50): alert("Enter marks is greater than 50"); break; case(e>=50): alert("Enter marks is greater than 50"); break; break; case(f>=50): alert("Enter marks is greater than 50"); break; break; case(g>=50): alert("Enter marks is greater than 50"); break; break; case(h>=50): alert("Enter marks is greater than 50"); break;break; case(i>=50): alert("Enter marks is greater than 50"); break; } switch(true) { case(k>=90): document.getElementById("demograde").innerhtml="A"; break; case(k>=80): document.getElementById("demograde").innerhtml="B"; break; case(k>=70): document.getElementById("demograde").innerhtml="C"; break; case(k>=60): document.getElementById("demograde").innerhtml="D"; break; case(k<40): document.getElementById("demograde").innerhtml="FAIL"; break; } } } </script> </head> <br> <body> <font face="verdana" size="+3"><center><h1><u>DYNAMIC MARKSHEET</u></h1></center></font> <fieldset> <legend><u><h2>STUDENT INFORMATION</h2></u></legend> <center> <table id="tb1" bgcolor="skyblue"> <form name=form1> <tr> <td>INSTITUTE NAME:</td> <td><input type="text" name="txtins"></input></td> <td>BRANCH NAME</td> <td><input type="txt" name="txtbname"></td> </tr> <tr> <td>STUDENT NAME:</td> <td><input type="txt" name="txtstu"></td> <td>FATHER'S NAME:</td> <td><input type="txt" name="txtfname"></td> </tr> <tr> </tr> </center> </table> </fieldset> <br> <br> <fieldset> <legend><h2><u>FILL INFORMATION</u></h2></legend> <center> <table id ="tb2" bgcolor="pink" height="100"> <tr> <td>MATHEMATIC 2:</td> <td><input type="txt" name="txtm"></td><td>out of 50 marks</td> </tr> <tr> <td>WEB TECHNOLOGY</td> <td><input type="txt" name="txtw"></td><td>out of 50 marks</td> </tr> <tr> <td>OFFICE TOOLS</td> <td><input type="txt" name="txto"></td><td>out of 50 marks</td> </tr> <tr> <td>DATA STRUCTURE</td> <td><input type="txt" name="txtd"></td><td>out of 50 marks</td> </tr> <tr> <td>C PROGRAMMING</td> <td><input type="txt" name="txtc"></td><td>out of 50 marks</td> </tr> </table> </center> <center> <button type="button" onclick='myfun()'><h3>SUBMIT</h3></button> <button type="reset"><h3>RESET</h3></button> </center> </fieldset> <br><br> <fieldset> <legend><u><h2>SEE YOUR RESULT</h2></u></legend> <table border="4" bgcolor="skyblue"> <tr> <td colspan="2" align="center"><h3>STUDENT INFORMATION</h3></td> </tr> <tr> <td>INSTITUTE NAME:</td> <!---<td><input type="text" id="demoins"/></td>--> <td><type id="demoins"></td> </tr> <tr> <td text="blue">BRANCH:NAME</td><td><type id="demob"></td> </tr> <tr> <td>STUDENT NAME:</td><td><type id="demostu" /></td> </tr> <tr> <td>FATHER'S NAME</td><td><type id="demof"></td> </tr> <tr> <td colspan="2" align="center"><h3>SUBJECT MARKS</h3></td> </tr> <tr> <td>MATH2</td><td><type id="demom"/></td> </tr> <tr> <td>WEB TECHNOLOGY</td><td><type id="demow"></td> </tr> <tr> <td>DATA STRUCTURE</td><td><type id="demod"></td> </tr> <tr> <td>OFFICE TOOLS</td><td><type id="demoot"></td> </tr> <tr> <td>C PROGRAMMING</td><td><type id="democp"></td> </tr> <tr> <td colspan="2" align="center"><h3>RESULT</h3></td> </tr> <tr> <td>GRAND TOTAL</td><td><type id="demogt"></td> </tr> <tr> <td>PERCENTAGE</td><td><type id="demoper"></td> </tr> <tr> <td>GRADE</td><td><type id="demograde"></td> </tr> </table> </fieldset> </body> </html>