Skip to main content Skip to docs navigation

HTML Table

HTML table

On this page

HTML table

Html Table

HTML table

Teacher Name Subject Age
John Computer 26
Marry English 31
Messi Math 28
html 
<!DOCTYPE html>
<html>
  <head>
    <title>Html Table</title>
<style>
table, th, td {
  border:2px solid black;
}
</style>
</head>
<body>

<h2>HTML table</h2>

<table style="width:100%">
  <tr>
    <th>Teacher Name</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Computer</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>English</td>
    <td>31</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>Math</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Table Cells

TD elements define table cells

Name Class Subject
html 
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>

<h2>TD elements define table cells</h2>

<table style="width:100%">
<tr>
<td>Name</td>
<td>Class</td>
<td>Subject</td>
</tr>
</table>

</body>
</html>

Table Row

Table Row

TR elements define table rows

Name Roll Number Subject
John 14 Math
html 
<!DOCTYPE html>
<html>
  <head>
    <title>Table Row</title>
<style>
  table,
  th,
  td {
    border: 2px solid black;
  }
</style>
</head>
<body>

  <h2>TR elements define table rows</h2>

  <table style="width:100%">
    <tr>
      <td>Name</td>
      <td>Roll Number</td>
      <td>Subject</td>
    </tr>
    <tr>
      <td>John</td>
      <td>14</td>
      <td>Math</td>
    </tr>
  </table>

</body>

</html>

Table Header

Table Headers

TH element defines table header

Name Roll Number Age
John 1 26
Marry 2 31
html 
<!DOCTYPE html>
<html>

<head>
  <title>Table Headers</title>
  <style>
    table,
    th,
    td {
      border: 2px solid black;
    }
  </style>
</head>

<body>

  <h2>TH element defines table header</h2>

  <table style="width:100%">
    <tr>
      <th>Name</th>
      <th>Roll Number</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>1</td>
      <td>26</td>
    </tr>
    <tr>
      <td>Marry</td>
      <td>2</td>
      <td>31</td>
    </tr>
  </table>

</body>

</html>

Table Border

HTML Table Border

Table With Border

Name Roll Number Subject
Marry 11 English
Messi 12 Math
John 13 Computer
html 
<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Border</title>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <h2>Table With Border</h2>

  <table style="width:100%">
    <tr>
      <th>Name</th>
      <th>Roll Number</th>
      <th>Subject</th>
    </tr>
    <tr>
      <td>Marry</td>
      <td>11</td>
      <td>English</td>
    </tr>
    <tr>
      <td>Messi</td>
      <td>12</td>
      <td>Math</td>
    </tr>
    <tr>
      <td>John</td>
      <td>13</td>
      <td>Computer</td>
    </tr>
  </table>

</body>
</html>

Border Collapse

Border Collapse

Border Collapse

Name Subject Marks
John Math 50
Marry Math 94
Messi Math 80
html 
<!DOCTYPE html>
<html>
<head>
  <title>Border Collapse</title>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Border Collapse</h2>


<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Subject</th> 
    <th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Math</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>Math</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>Math</td>
    <td>80</td>
  </tr>
</table>

</body>
</html>

Style Table Borders

Style Table Borders

Style Table Borders

Teacher Name Subject Age
John Computer 26
Marry English 31
Messi Math 28
html 
<!DOCTYPE html>
 <html>
   <head>
     <title>Style Table Borders</title>
     <style>
      .tab {
        border: 3px solid white;
      }
      .th1 {
        background-color: #11caf0;
         border: 3px solid white;
      }
      .td1 {
        background-color: #11caf0;
         border: 3px solid white;
      }
      </style>
 </head>
 <body>
 
 <h2>Style Table Borders</h2>
 
 <table class="tab" style="width:100%">
   <tr>
     <th class="th1">Teacher Name</th>
     <th class="th1">Subject</th>
     <th class="th1">Age</th>
   </tr>
   <tr>
     <td class="td1">John</td>
     <td class="td1">Computer</td>
     <td class="td1">26</td>
   </tr>
   <tr>
     <td class="td1">Marry</td>
     <td class="td1">English</td>
     <td class="td1">31</td>
   </tr>
     <tr>
     <td class="td1">Messi</td>
     <td class="td1">Math</td>
     <td class="td1">28</td>
   </tr>
 </table>
 
 </body>
 </html>

Round Table Borders 

<!DOCTYPE html>
<html>
<head>
<title>Round Table Borders</title>
<style>
table, th, td {
  border: 2px solid #be1e4c;
  border-radius: 10px;
  color: blue;
  text-align: center;
}
</style>
</head>
<body>

<h3>Round Table Borders</h3>

<table class="tab2" style="width:100%">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Cena</td>
  <td>25</td>
</tr>
<tr>
  <td>Jack</td>
  <td>Smith</td>
  <td>28</td>
</tr>
<tr>
  <td>James</td>
  <td>Messi</td>
  <td>30</td>
</tr>
</table>

</body>
</html>

Table Dotted Borders 

<!DOCTYPE html>
<html>
<head>
<title>Round Table Borders</title>
<style>
table, th, td {
  border: 2px solid #be1e4c;
  border-radius: 10px;
  color: blue;
  text-align: center;
}
</style>
</head>
<body>

<h3>Round Table Borders</h3>

<table class="tab2" style="width:100%">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Cena</td>
  <td>25</td>
</tr>
<tr>
  <td>Jack</td>
  <td>Smith</td>
  <td>28</td>
</tr>
<tr>
  <td>James</td>
  <td>Messi</td>
  <td>30</td>
</tr>
</table>

</body>
</html>

Table Border Color 

<!DOCTYPE html>
<html>
<head>
<title>Table Border Color</title>
<style>
th, td {
border-style:solid;
border-color: blue;
}
</style>
</head>
<body>

<h3>Table with Border Color</h3>

<table style="width:100%">
<tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Cena</td>
  <td>25</td>
</tr>
<tr>
  <td>Jack</td>
  <td>Smith</td>
  <td>28</td>
</tr>
<tr>
  <td>James</td>
  <td>Messi</td>
  <td>30</td>
</tr>
</table>

</body>
</html>

Table Width

HTML Table Sizes

100% width HTML Table

Name Subject Marks
John Math 50
Marry Math 84
Messi Math 70
html 
<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Sizes</title>
<style>
table, th, td {
  border:1px solid black;
}
</style>
</head>
<body>

<h2>100% wide HTML Table</h2>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Subject</th> 
    <th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Math</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>Math</td>
    <td>84</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>Math</td>
    <td>70</td>
  </tr>
</table>

</body>
</html>

Table Column Width

HTML Table Column Width

Set the first column to 50% of the table width

Name Subject Marks
John Computer 40
Marry Computer 70
Messi Computer 55
html 
<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Column Width</title>
<style>
table, th, td {
  border:1px solid black;
}
</style>
</head>
<body>

<h4>Set the first column to 50% of the table width</h4>

<table style="width:100%">
  <tr>
    <th style="width:50%">Name</th>
    <th>Subject</th> 
    <th>Marks</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Computer</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>Computer</td>
    <td>70</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>Computer</td>
    <td>55</td>
  </tr>
</table>

</body>
</html>

Table Row Height

HTML Table Row Height

Set the height of the second row to 50 px

Name Subject Marks
John English 40
Marry English 70
Messi English 55
html 
<!DOCTYPE html>
<html>
<head>
  <title>HTML Table Row Height</title>
<style>
table, th, td {
  border:1px solid black;
}
</style>
</head>
<body>

<h4>Set the height of the second row to 50 px</h4>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Subject</th> 
    <th>Marks</th>
  </tr>
  <tr style="height:50px">
    <td>John</td>
    <td>English</td>
    <td>40</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>English</td>
    <td>70</td>
  </tr>
  <tr>
    <td>Messi</td>
    <td>English</td>
    <td>55</td>
  </tr>
</table>

</body>
</html>

Vertical Table Header

Vertical Table Headers

Vertical Table Headers

Name John Jack Smith
Class 10 12 11
Roll Number 1 2 3
html 
<!DOCTYPE html>
<html>
<head>
<title>Vertical Table Headers</title>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Vertical Table Headers</h2>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <td>John</td>
    <td>Jack</td>
    <td>Smith</td>
  </tr>
  <tr>
    <th>Class</th>
    <td>10</td>
    <td>12</td>
    <td>11</td>
  </tr>
  <tr>
    <th>Roll Number</th>  
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

</body>
</html>

Text Left Align

HTML Text Left Align

Left align Header

Teacher Name Subject Age
John Computer 26
Marry English 31
Messi Math 28
html 
<!DOCTYPE html>
<html>
<head>
  <title>HTML Text Left Align</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
th {
  text-align: left;
}
</style>
</head>
<body>

<h2>Left align Header</h2>


<table style="width:100%">
  <tr>
    <th>Teacher Name</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Computer</td>
    <td>26</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>English</td>
    <td>31</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>Math</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Table Colspan

Table Colspan

A Header that spans two Columns

Name Age
John Carey 25
Jackson Green 28
html 
<!DOCTYPE html>
<html>
<head>
  <title>Table Colspan</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>A Header that spans two Columns</h2>


<table style="width:100%">
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Carey</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Jackson</td>
    <td>Green</td>
    <td>28</td>
  </tr>
</table>
</body>
</html>

Table Rowspan

Table Rowspan

Cell that spans two rows

Name Subject
Jack Math
Smith
html 
<!DOCTYPE html>
<html>
<head>
  <title>Table Rowspan</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Cell that spans two rows</h2>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Subject</th>
  </tr>
  <tr>
    <td>Jack</td>
    <td rowspan="2">Math</td>
  </tr>
  <tr>
    <td>Smith</td>
  </tr>
</table>
</body>
</html>

Table Caption 

<!DOCTYPE html>
<html>

<head>
<title>Table Caption</title>
<style>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>
</head>

<body>

<h3>Table Caption</h3>

<table style="width:100%">
  <caption>Employee Details</caption>
  <tr>
    <th>Employee Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Glenn</td>
    <td>Manager</td>
  </tr>
  <tr>
    <td>Jack</td>
    <td>Supervisor</td>
  </tr>
</table>

</body>

</html>

Table Cell Padding 

<!DOCTYPE html>
<html>
<head>
<title>Table Cell Padding</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>

<h3>Cell Padding</h3>

<table style="width:100%">
<tr>
  <th>First-Name</th>
  <th>Last-Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Carey</td>
  <td>25</td>
</tr>
<tr>
  <td>Jackson</td>
  <td>Green</td>
  <td>28</td>
</tr>
<tr>
  <td>Jack</td>
  <td>Warne</td>
  <td>26</td>
</tr>
</table>

</body>
</html>

Table Cell Spacing 

<!DOCTYPE html>
<html>
<head>
<title>Table Cell Spacing</title>
<style>
table, th, td {
border: 2px solid black;
}
table {
border-spacing: 20px;
}
</style>
</head>
<body>

<h3>Cell Spacing</h3>

<table style="width:100%">
<tr>
  <th>Teacher Name</th>
  <th>Subject</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Computer</td>
  <td>26</td>
</tr>
<tr>
  <td>Marry</td>
  <td>English</td>
  <td>31</td>
</tr>
  <tr>
  <td>Messi</td>
  <td>Math</td>
  <td>28</td>
</tr>
</table>

</body>
</html>

Zebra Striped Table

Zebra Striped Table

Zebra Striped Table

Teacher Name Subject Age
John Computer 26
Marry English 31
Messi Math 28
Adam English 28
Glenn Computer 28
html 
<!DOCTYPE html>
<html>
<head>
  <title>Zebra Striped Table</title>
<style>
th, td {
  text-align: left;
  padding: 8px;
}

.tr5:nth-child(odd) {
  background-color: #24b9a0;
}
</style>
</head>
<body>

<h3>Zebra Striped Table</h3>

<table style="width:100%">
  <tr class="tr5">
    <th>Teacher Name</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr class="tr5">
    <td>John</td>
    <td>Computer</td>
    <td>26</td>
  </tr>
  <tr class="tr5">
    <td>Marry</td>
    <td>English</td>
    <td>31</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>Math</td>
    <td>28</td>
  </tr>
  <tr class="tr5">
    <td>Adam</td>
    <td>English</td>
    <td>28</td>
  </tr>
  <tr class="tr5">
    <td>Glenn</td>
    <td>Computer</td>
    <td>28</td>
  </tr>
</table>

</body>
</html>

Vertical Zebra Stripes Table 

<!DOCTYPE html>
<html>
<head>
<title>Vertical Zebra Stripes Table</title>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}

th:nth-child(odd),td:nth-child(odd) {
background-color: #b790f5;
}
</style>
</head>
<body>

<h2>Vertical Zebra Stripes Table</h2>

<table style="width:100%">
<tr>
  <th>Teacher Name</th>
  <th>Subject</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Computer</td>
  <td>26</td>
</tr>
<tr>
  <td>Marry</td>
  <td>English</td>
  <td>31</td>
</tr>
  <tr>
  <td>Messi</td>
  <td>Math</td>
  <td>28</td>
</tr>
</table>

</body>
</html>

Vertical and Horizontal Zebra Stripes Table 

<!DOCTYPE html>
<html>
<head>
<title>Vertical and Horizontal Zebra Stripes Table</title>
<style>
  table, th, td {
    border: 2px solid black;
    border-collapse: collapse;
  }
  
  tr:nth-child(even) {
    background-color: #5480ff;
    
  }
  
  th:nth-child(even),td:nth-child(even) {
    background-color: #5480ff;
  }
  </style>
</head>
<body>

<h3>Combine Vertical and Horizontal Zebra Stripes Table</h3>

<table style="width:100%">
<tr>
  <th>Name</th>
  <th>Class</th>
  <th>Roll Number</th>
  <th>Subject</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>10</td>
  <td>1</td>
  <td>Computer</td>
  <td>26</td>
</tr>
<tr>
  <td>Marry</td>
  <td>10</td>
  <td>2</td>
  <td>English</td>
  <td>31</td>
</tr>
  <tr>
  <td>Messi</td>
  <td>10</td>
  <td>3</td>
  <td>Math</td>
  <td>28</td>
</tr>
</table>

</body>
</html>

Table Hoverable 

<!DOCTYPE html>
<html>
<head>
<title>Table Hoverable</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #f1f1f1;
}

tr:hover {background-color: #eeb0e7;}
</style>
</head>
<body>

<h3>Table Hoverable Rows</h3>

<table>
<tr>
  <th>Teacher Name</th>
  <th>Subject</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Computer</td>
  <td>26</td>
</tr>
<tr>
  <td>Marry</td>
  <td>English</td>
  <td>31</td>
</tr>
  <tr>
  <td>Messi</td>
  <td>Math</td>
  <td>28</td>
</tr>
</table>

</body>
</html>

Table Colgroup

Table Colgroup

HTML Table Colgroup

Name Class Roll Number Subject Age
John 9th 1 Computer 12
Marry 9th 2 Computer 11
Messi 9th 3 Computer 13
Adam 9th 4 Computer 12
Glenn 9th 5 Computer 13
html 
<!DOCTYPE html>
<html>
<head>
  <title>Table Colgroup</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h3>HTML Table Colgroup</h3>

<table style="width: 100%;">
  <colgroup>
    <col span="2" style="background-color: #c9e168">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Roll Number</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>9th</td>
    <td>1</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>9th</td>
    <td>2</td>
    <td>Computer</td>
    <td>11</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>9th</td>
    <td>3</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>9th</td>
    <td>4</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Glenn</td>
    <td>9th</td>
    <td>5</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
</table>

</body>
</html>

Table Colgroup Element

Table Colgroup Element

Multiple Col Elements

Name Class Roll Number Subject Age
John 9th 1 Computer 12
Marry 9th 2 Computer 11
Messi 9th 3 Computer 13
Adam 9th 4 Computer 12
Glenn 9th 5 Computer 13
html 
<!DOCTYPE html>
<html>
<head>
  <title>Table Colgroup Element</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Multiple Col Elements</h2>

<table style="width: 100%;">
  <colgroup>
    <col span="1" style="background-color: #aef2f0">
    <col span="3" style="background-color: #aad79f">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Roll Number</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>9th</td>
    <td>1</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>9th</td>
    <td>2</td>
    <td>Computer</td>
    <td>11</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>9th</td>
    <td>3</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>9th</td>
    <td>4</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Glenn</td>
    <td>9th</td>
    <td>5</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
</table>

</body>
</html>

Table Empty Colgroup

Table Empty Colgroup

Table Empty Colgroup

Name Class Roll Number Subject Age
John 9th 1 Computer 12
Marry 9th 2 Computer 11
Messi 9th 3 Computer 13
Adam 9th 4 Computer 12
Glenn 9th 5 Computer 13
html 
<!DOCTYPE html>
<html>
<head>
  <title>Table Empty Colgroup</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h3>Table Empty Colgroup</h3>

<table style="width: 100%;">
<colgroup>
  <col span="2">
  <col span="2" style="background-color: #d7acf9">
</colgroup>
<tr>
  <th>Name</th>
  <th>Class</th>
  <th>Roll Number</th>
  <th>Subject</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>9th</td>
  <td>1</td>
  <td>Computer</td>
  <td>12</td>
</tr>
<tr>
  <td>Marry</td>
  <td>9th</td>
  <td>2</td>
  <td>Computer</td>
  <td>11</td>
</tr>
  <tr>
  <td>Messi</td>
  <td>9th</td>
  <td>3</td>
  <td>Computer</td>
  <td>13</td>
</tr>
<tr>
  <td>Adam</td>
  <td>9th</td>
  <td>4</td>
  <td>Computer</td>
  <td>12</td>
</tr>
<tr>
  <td>Glenn</td>
  <td>9th</td>
  <td>5</td>
  <td>Computer</td>
  <td>13</td>
</tr>
</table>

</body>
</html>

Hide Columns

Hide Columns

HTML Table Hide Columns

Name Class Roll Number Subject Age
John 9th 1 Computer 12
Marry 9th 2 Computer 11
Messi 9th 3 Computer 13
Adam 9th 4 Computer 12
Glenn 9th 5 Computer 13
html 
<!DOCTYPE html>
<html>
<head>
  <title>Hide Columns</title>
<style>
table, th, td {
  border: 2px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>HTML Table Hide Columns</h2>

<table style="width: 100%;">
<colgroup>
    <col span="2">
    <col span="2" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Class</th>
    <th>Roll Number</th>
    <th>Subject</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>9th</td>
    <td>1</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Marry</td>
    <td>9th</td>
    <td>2</td>
    <td>Computer</td>
    <td>11</td>
  </tr>
    <tr>
    <td>Messi</td>
    <td>9th</td>
    <td>3</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
  <tr>
    <td>Adam</td>
    <td>9th</td>
    <td>4</td>
    <td>Computer</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Glenn</td>
    <td>9th</td>
    <td>5</td>
    <td>Computer</td>
    <td>13</td>
  </tr>
  </table>

</body>
</html>