Back to Freecodecamp

Step 4

curriculum/challenges/english/blocks/workshop-final-exams-table/66a9bcf00f13a418368a272e.md

latest2.1 KB
Original Source

--description--

The table head element consists of a <dfn>table row</dfn> element, tr, which contains the <dfn>table header cell</dfn> elements, th.

Here is an example using the tr and th elements for a sports table:

html
<table>
  <caption>Football Scores</caption>
  <thead>
    <tr>
      <th>Team</th>
      <th>Wins</th>
      <th>Losses</th>
    </tr>
  </thead>
</table>

Inside your thead element, add a tr element.

Inside your tr element, add three th elements.

The first th element should contain the text Last Name. The second th element should contain the text First Name. The third th element should contain the text Grade.

--hints--

You should have an opening tr tag.

js
assert.match(code, /<tr>/i);

You should have a closing tr tag.

js
assert.match(code, /<\/tr>/i);

Your tr element should be inside your thead element.

js
const trEl = document.querySelector('tr');
assert.strictEqual(trEl?.parentElement?.tagName, 'THEAD');

Your first th element should have the text of Last Name.

js
const thEl = document.querySelectorAll('th')[0];
assert.strictEqual(thEl?.textContent.trim(), 'Last Name');

Your second th element should have the text of First Name.

js
const thEl = document.querySelectorAll('th')[1];
assert.strictEqual(thEl?.textContent.trim(), 'First Name');

Your third th element should have the text of Grade.

js
const thEl = document.querySelectorAll('th')[2];
assert.strictEqual(thEl?.textContent.trim(), 'Grade');

All of your th elements should be inside your tr element.

js
assert.match(code, /<tr>.*<th>.*<\/th>.*<th>.*<\/th>.*<th>.*<\/th>.*<\/tr>/is);

--seed--

--seed-contents--

html
<!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>     
      --fcc-editable-region--
        
      --fcc-editable-region--
      </thead>
    </table>
  </body>
</html>