DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build a Final Exams Table

#community #learning #programming #webdev

After finishing a freeCodeCamp theory lesson on working with tables, I moved on to the next workshop, where it was time to put that theory into practice. As usual, I was provided with some HTML boilerplate to get started:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Calculus Final Exams Table</title>
    <meta charset="UTF-8" />
  </head>
  <body>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Initially, I needed to nest a table element inside the body before adding a caption element. Here's an example of how it looks:

<table>
  <caption>Football Scores</caption>
</table>
Enter fullscreen mode Exit fullscreen mode

Next, a thead element was added to contain the header content, and I nested tr and th elements within it, just like in the following example:

<table>
  <caption>Football Scores</caption>
  <thead>
    <tr>
      <th>Team</th>
      <th>Wins</th>
      <th>Losses</th>
    </tr>
  </thead>
</table>
Enter fullscreen mode Exit fullscreen mode

With the table header complete, the next lessons focused on adding the table body and populating it with content. This involved using the tr and td elements, as shown in the example below:

<tr>
  <td>1</td>
  <td>John Doe</td>
  <td>USA</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

In the penultimate step, I added a table foot element containing a tr with two td elements. Finally, I used the colspan attribute to have a cell span multiple columns, completing the table layout.

Below is the completed code from this workshop:

<!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>

      <tfoot>
        <tr>
          <td colspan="2">Average Grade</td>
          <td>78.8</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

With the workshop complete, it's time for the next lab - building a Book Catalog Table. Catch you there!

Written by a Human logo

Top comments (2)

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

This is a really clean walkthrough 👏
You didn’t just paste the final code — you explained why each table element exists and how they fit together, which is exactly how these concepts stick.

Nice touch using <thead>, <tbody>, and <tfoot> properly, and the colspan in the footer makes the table feel complete and realistic. A lot of beginners skip those details.

Good luck with the Book Catalog Table — you’re clearly building a solid HTML foundation step by step 🚀

Collapse
 
richardpascoe profile image
Richard Pascoe •

Thank once again, Bhavin. It's always very motivating to get such positive feedback - truly appreciated!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.