DEV Community

Richard Pascoe
Richard Pascoe

Posted on

Build a Tech Conference Schedule Table

#community #learning #programming #webdev

After completing two theory lessons on freeCodeCamp yesterday covering Working with Accessible Tables and Forms, I moved on to the related workshop.

As with previous workshops, Build a Tech Conference Schedule Table provides an example of the completed table along with some HTML boilerplate, shown below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tech Conference 2025 Schedule</title>
</head>
<body>

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

The next few exercises followed the familiar pattern of filling in the boilerplate with missing HTML elements - in this case h1, table, caption (an important accessibility feature), followed by thead and a tr element.

In the next step, four th elements were nested within the tr element and populated with headings, helping to give the table clear structure and improving accessibility for screen readers, as illustrated here:

    <thead>
      <tr>
        <th>Time</th>
        <th>Track A</th>
        <th>Track B</th>
        <th>Track C</th>
      </tr>
    </thead>
Enter fullscreen mode Exit fullscreen mode

In the fifth exercise, you add the scope attribute, which defines whether a header cell applies to a row, column, or a group of rows or columns. This is demonstrated in the following example:

<th scope="col">Example Header</th>
Enter fullscreen mode Exit fullscreen mode

With this complete, the next steps focused on building the table's body section, beginning with the tbody element and a tr element. A populated th element and three additional tr elements are added to complete the structure. The scope attribute is applied again to clearly define the th element as a row header. These steps are then repeated for two more table rows.

The eleventh exercise points out that the td element in the third row - which simply contains "Break" - would look better if it spanned all three columns. Using the colspan attribute not only improves the table’s visual layout but also helps screen readers understand that this cell covers multiple columns. An example is shown below:

<tr>
  <td colspan="3">Total Points</td>
</tr>
Enter fullscreen mode Exit fullscreen mode

The closing exercises involve adding three additional rows, complete with the corresponding elements and attributes, following the same pattern as before. Below is the final code for this workshop:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tech Conference 2025 Schedule</title>
</head>
<body>
  <h1>Tech Conference 2025 Schedule</h1>

  <table>
    <caption>Schedule by Track and Time</caption>

    <thead>
      <tr>
        <th scope="col">Time</th>
        <th scope="col">Track A</th>
        <th scope="col">Track B</th>
        <th scope="col">Track C</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">9:00 AM</th>
        <td>Keynote: Tech Future</td>
        <td>Intro to Web Dev</td>
        <td>UX for All</td>
      </tr>

      <tr>
        <th scope="row">10:00 AM</th>
        <td>Accessibility Deep Dive</td>
        <td>CSS for Beginners</td>
        <td>Inclusive Design Principles</td>
      </tr>

      <tr>
        <th scope="row">11:00 AM</th>
        <td colspan="3">Break</td>
      </tr>

      <tr>
        <th scope="row">11:30 AM</th>
        <td>AR/VR in Education</td>
        <td>JavaScript Fundamentals</td>
        <td>Design Systems at Scale</td>
      </tr>

      <tr>
        <th scope="row">12:30 PM</th>
        <td colspan="3">Lunch Break</td>
      </tr>

      <tr>
        <th scope="row">2:00 PM</th>
        <td>Voice UI Workshop</td>
        <td>Git & GitHub Essentials</td>
        <td>Color & Contrast in UI</td>
      </tr>
    </tbody>
  </table>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The next freeCodeCamp lab after this workshop is Debug a Donation Form - more on that next time. As always, keep coding!

Written by a Human logo

Top comments (6)

Collapse
 
itsugo profile image
Aryan Choudhary •

I really appreciate this beginner-friendly walkthrough.
Seeing a table as a structure to help screen readers make sense of it, rather than just a visual layout, really helps it click. It's been great to see the progress in this series, and I'm looking forward to the rest.
Keep coding Richard!

Collapse
 
richardpascoe profile image
Richard Pascoe •

Thank you, Aryan! Coming from someone with the quality of your own writing, your comments are always a great motivation.

I have to say - once again - that I’m really enjoying this latest version of the curriculum over at freeCodeCamp!

Collapse
 
bhavin-allinonetools profile image
Bhavin Sheth •

Nice walkthrough 👏

I like how you didn’t just build the table, but explained why things like caption, scope, and colspan matter for accessibility. That’s something many beginners skip.

Tables start to make much more sense when you see them as structure for screen readers, not just layout on the screen. Great progress in this series — keep going!

Collapse
 
richardpascoe profile image
Richard Pascoe •

Thanks, Bhavin! I always find your kind comments so encouraging.

Indeed, as I'm currently working through the accessibility section at freeCodeCamp, I wanted to make sure I’m conveying why this is so important.

Collapse
 
martijn_assie_12a2d3b1833 profile image
Martijn Assie •

Nice walkthrough, very clear and easy to follow!!
You don’t just show what to type, you explain why things like scope, caption, and colspan actually matter for accessibility...
One solid tip to add is to open the table in a screen reader or accessibility tree at least once, even briefly, it really clicks why proper headers and structure are not optional!
That moment usually turns tables from “markup” into “real UI” for people?

Collapse
 
richardpascoe profile image
Richard Pascoe •

Glad you liked the post, Martijn - thank you so very much for the tip!