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>
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>
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>
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>
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>
The next freeCodeCamp lab after this workshop is Debug a Donation Form - more on that next time. As always, keep coding!
SOCIAL SHARE CARD GENERATOR