HTML5: How to group the footer content in a table ?

Last update on February 14 2024 12:56:00 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Define document type as HTML -->
<html><!-- Begin HTML document -->
<head><!-- Start of document header -->
<meta charset="utf-8"><!-- Define character encoding -->
<title>How to group the footer content in a table</title><!-- Title of the HTML page -->
</head><!-- End of document header -->
<body><!-- Start of document body -->
<table border="1"><!-- Table element with border attribute set to "1" -->
<thead><!-- Table header section -->
<tr><!-- Table row element for header -->
<th>Student code</th><!-- Table header cell for column "Student code" -->
<th>% of marks</th><!-- Table header cell for column "% of marks" -->
</tr><!-- End of table row -->
</thead><!-- End of table header section -->
<tfoot><!-- Table footer section -->
<tr><!-- Table row element for footer -->
<td>Average</td><!-- Table data cell for "Average" -->
<td>83</td><!-- Table data cell for average percentage -->
</tr><!-- End of table row -->
</tfoot><!-- End of table footer section -->
<tr><!-- Table row element -->
<td>S001</td><!-- Table data cell with content "S001" -->
<td>85</td><!-- Table data cell with content "85" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S002</td><!-- Table data cell with content "S002" -->
<td>86</td><!-- Table data cell with content "86" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S003</td><!-- Table data cell with content "S003" -->
<td>72</td><!-- Table data cell with content "72" -->
</tr><!-- End of table row -->
<tr><!-- Table row element -->
<td>S004</td><!-- Table data cell with content "S004" -->
<td>89</td><!-- Table data cell with content "89" -->
</tr><!-- End of table row -->
</table><!-- End of table -->
</body><!-- End of document body -->
</html><!-- End of HTML document -->

Explanation:

This HTML code defines a webpage with a table displaying student codes and their respective marks.
The <table> tag creates a table structure.
The <thead> tag marks the beginning of the table header section.
Inside <thead>, a row <tr> with header cells <th> for "Student code" and "% of marks" is defined.
The <tfoot> tag marks the beginning of the table footer section.
Inside <tfoot>, a row <tr> with data cells <td> for "Average" and the calculated average marks is defined.
The remaining <tr> elements outside of <thead> and <tfoot> are for displaying individual student data.
Each student's data is represented in a row with data cells <td> for "Student code" and "% of marks".

Live Demo:

See the Pen tfoot-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page