web design and development tutorials: Html Table Tag

Html Table Tag:

In this we will learn how to create a Result Sheet in Html with the help of <table></table> Tags.
I put an example here:

<!DOCTYPE html>

<html>

<head>

<title>Html Table</title>

<style>
th{
border: 1px solid;
text-align: center;
}
td{
border: 1px solid;
text-align:center;
}

</style>
</head>
<body>
<table style="border: 1px solid;">
<tr>
<th>Id</th>
<th>Name</th>
<th>Class</th>
<th>Ob.Marks</th>
<th>G.Marks</th>
<th>Percantage</th>
<th>Grade</th>
</tr>
<tr>
<td>1</td>
<td>Asad</td>
<td>9th</td>
<td>450</td>
<td>600</td>
<td>75</td>
<td>A</td>

</tr>
<tr>
<td>2</td>
<td>Ashfaq</td>
<td>9th</td>
<td>525</td>
<td>600</td>
<td>87.5</td>
<td>A++</td>
</tr>
<tr>
<td>3</td>
<td>Ishaq</td>
<td>9th</td>
<td>400</td>
<td>600</td>
<td>66.66</td>
<td>B</td>
</tr>
<tr>
<td>4</td>
<td>Bakhtawar</td>
<td>9th</td>
<td>489</td>
<td>600</td>
<td>81.5</td>
<td>A++</td>
</tr>
<tr>
<td>5</td>
<td>Ajmal</td>
<td>9th</td>
<td>508</td>
<td>600</td>
<td>84.6</td>
<td>A++</td>
</tr>
</table>
</body>
</html>

The result of this html table coding will be prefer on browser as shown below:

↧↧

you can see that how to create a table with this coding to create a table we take <table> tags opening and </table> tags closing <tr> represent table raws this apply for any new row for heading and data every data put in <td> which take a new <tr> table raw in your knowledge at the time of coding that tag open that close after the function completition of that tag.

for more information you can visit my youtube channel i put here my Html table's tutorial here: