Crafting Data Tables

When and How to Use Tables

First, a crucial point: tables are for tabular data. Think of a spreadsheet. They should not be used to create the layout of your entire webpage. In the past, developers used tables to position elements on a page, but this practice is outdated and bad for accessibility and search engine optimization. We've already learned the modern way: using semantic layout elements.

With that in mind, let's learn the right way to build a table.

The Basic Building Blocks of a Table

An HTML table has a clear, hierarchical structure. To understand the fundamental tags, please watch the first few minutes of this excellent tutorial.

As you saw, the structure is logical:

• The <table> element contains the whole thing.
• Inside the <table>, you create one or more <tr> (table row) elements.
• Inside each <tr>, you create one or more <td> (table data) or <th> (table header) elements. These are your cells.

By default, <th> elements are bold and centered, signaling that they are the titles for a column or row.

Practice: Create Your First Table

Let's apply this. Open your index.html file. Find a good spot within your <main> element, perhaps inside a new <section>, and add a simple table that lists a few courses you might offer.

<section>
  <h2>Course Offerings</h2>
  <table>
    <tr>
      <th>Course Name</th>
      <th>Topic</th>
      <th>Duration</th>
    </tr>
    <tr>
      <td>Intro to Bookkeeping</td>
      <td>Accounting</td>
      <td>4 Weeks</td>
    </tr>
    <tr>
      <td>Web Dev Foundations</td>
      <td>Programming</td>
      <td>8 Weeks</td>
    </tr>
  </table>
</section>

Save your file and view it in the browser. It will look very plain—that's normal! We'll touch on styling later. The important thing is that the data is now structured correctly.

Adding More Semantic Structure and Spanning Cells

Just as we used <header>, <main>, and <footer> for our page layout, tables have their own semantic grouping elements:

• <thead>: Wraps the header row(s) of the table.
• <tbody>: Wraps the main data rows of the table.
• <tfoot>: Wraps the footer row(s), often used for summaries or totals.
• <caption>: Provides a title or caption for the entire table. This is very important for accessibility, as it tells screen reader users what the table is about before they dive in.

Sometimes, you also need a single cell to span across multiple columns or rows. For this, we use two attributes:

• colspan: Makes a cell span multiple columns.
• rowspan: Makes a cell span multiple rows.

Let's return to the video to see how these elements and attributes are implemented.

<section>
  <h2>Course Offerings</h2>
  <table>
    <caption>An overview of available courses.</caption>
    <thead>
      <tr>
        <th>Course Name</th>
        <th>Topic</th>
        <th>Duration</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Intro to Bookkeeping</td>
        <td>Accounting</td>
        <td>4 Weeks</td>
      </tr>
      <tr>
        <td>Web Dev Foundations</td>
        <td>Programming</td>
        <td>8 Weeks</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Enroll now for a 10% discount!</td>
      </tr>
    </tfoot>
  </table>
</section>

Making Tables Accessible with scope

The final piece of the puzzle is ensuring our table is fully accessible to users with screen readers. While <th> tags help, we can be more explicit by adding the scope attribute. This attribute tells the browser exactly what the header is for.

• scope="col": The header is for the column.
• scope="row": The header is for the row.

This creates a strong, unambiguous link between a header and its corresponding data cells. Let's see how to add it.

Let's Build a Full Course Schedule

Now, let's combine everything you've learned to build a more detailed weekly schedule for one of your courses. This example will use all the elements we've discussed. Replace your simple course table with this more detailed schedule.

<section>
  <h2>'Intro to Bookkeeping' Weekly Schedule</h2>
  <table>
    <caption>A summary of weekly activities and topics.</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Time</th>
        <th scope="col">Topic</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00 AM - 11:00 AM</td>
        <td>Lecture: Debits and Credits</td>
      </tr>
      <tr>
        <th scope="row">Wednesday</th>
        <td>9:00 AM - 11:00 AM</td>
        <td>Lecture: The General Ledger</td>
      </tr>
      <tr>
        <th scope="row">Friday</th>
        <td>9:00 AM - 10:00 AM</td>
        <td>Quiz & Review</td>
      </tr>
      <tr>
        <th scope="row">Friday</th>
        <td>10:00 AM - 11:00 AM</td>
        <td>Open Office Hours</td>
      </tr>
    </tbody>
  </table>
</section>

Notice how this structure clearly organizes the data, uses semantic tags for meaning (<thead>, <tbody>), provides a <caption>, and uses scope for accessibility.

Conclusion

Congratulations on completing the HTML Foundations module! You now have a solid understanding of how to structure content, from an entire page down to a single table cell.

Key Takeaways:

• HTML tables are used for displaying tabular data, not for page layout.
• The basic structure uses <table>, <tr> (rows), and <td> (data cells).
• Use <th> with the scope attribute (col or row) for accessible headers.
• Organize your table with the semantic <caption>, <thead>, <tbody>, and <tfoot> elements.
• Use colspan and rowspan to merge cells for more complex layouts.

Preview of the Next Lesson:
Our website is well-structured, but it probably doesn't look very exciting. As you've seen, tables without any styling are hard to read. That's about to change. In our next lesson, we will kick off the Styling with CSS module. You'll learn how to link an external CSS stylesheet to an HTML document, which is the first step in taking control of your site's visual design, from colors and fonts to borders and spacing.