curriculum/challenges/english/blocks/workshop-final-exams-table/66a9cb26ec6bd41cf6c82bc5.md
The last section to add to the table would be the <dfn>table foot</dfn> element, tfoot. The table foot element will be used to display the average grade for all of the students in the table.
Add a tfoot element to the table.
Inside the tfoot element, add a tr element.
Inside the tr element, add two td elements.
The first td element should contain the text Average Grade. The second td element should contain the text 78.8.
You should have an opening tfoot tag.
assert.match(code, /<tfoot>/);
You should have a closing tfoot tag.
assert.match(code, /<\/tfoot>/);
You should have a tr element inside your tfoot element.
assert.isNotNull(document.querySelector('tfoot tr'));
Your first td element should contain the text Average Grade. Make sure it is inside the tr element.
assert.strictEqual(document.querySelector('tfoot tr td:first-child')?.textContent.trim(), 'Average Grade');
Your second td element should contain the text 78.8. Make sure it is inside the tr element.
assert.strictEqual(document.querySelector('tfoot tr td:nth-of-type(2)')?.textContent.trim(), '78.8');
Your tr element should have two td elements inside it.
assert.strictEqual(document.querySelectorAll('tfoot tr td').length, 2);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculus Final Exams Table</title>
<meta charset="UTF-8" />
</head>
<body>
<table>
<caption>
Calculus Final Exam Grades
</caption>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Davis</td>
<td>Alex</td>
<td>54</td>
</tr>
<tr>
<td>Doe</td>
<td>Samantha</td>
<td>92</td>
</tr>
<tr>
<td>Rodriguez</td>
<td>Marcus</td>
<td>88</td>
</tr>
<tr>
<td>Thompson</td>
<td>Jane</td>
<td>77</td>
</tr>
<tr>
<td>Williams</td>
<td>Natalie</td>
<td>83</td>
</tr>
</tbody>
--fcc-editable-region--
--fcc-editable-region--
</table>
</body>
</html>