Week 4: Structuring Data with Tables

Learn how to present tabular data effectively using HTML tables.

Explore Chapter 4

Chapter 4: Presenting Tabular Data

Basic Table Structure

HTML tables are used to display data arranged in rows and columns. The core elements for creating a table are:

<table>: The main container for the entire table.
<tr> (Table Row): Defines a row within the table.
<td> (Table Data): Defines a standard data cell within a row.
<th> (Table Header): Defines a header cell within a row. Header cells are typically displayed as bold and centered by browsers and carry semantic meaning.

Example: Simple Table

<table border="1"> <!-- Note: border attribute is outdated; use CSS for styling -->
  <tr>
    <th>Name</th>
    <th>Role</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Developer</td>
    <td>alice@example.com</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Designer</td>
    <td>bob@example.com</td>
  </tr>
</table>

Renders as (basic structure, styling depends on CSS):

Name	Role	Email
Alice	Developer	alice@example.com
Bob	Designer	bob@example.com

Important: Use tables for presenting actual tabular data, not for page layout. CSS is the standard for layout.

Semantic Table Sections: <thead>, <tbody>, <tfoot>

For better structure and semantics, especially in larger tables, you can group rows into header, body, and footer sections:

<thead>: Groups the header content (usually containing <th> elements) of the table.
<tbody>: Groups the main body content (data rows) of the table.
<tfoot>: Groups the footer content (summary rows, totals, etc.) of the table.

These elements don't change the visual appearance by default but provide important structural information for browsers, screen readers, and styling with CSS. They also allow the browser to scroll the table body independently of the header and footer in some cases.

Example with Sections

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>5</td>
      <td>$5.00</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td>3</td>
      <td>$3.50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td> <!-- Colspan explained next -->
      <td>$8.50</td>
    </tr>
  </tfoot>
</table>

Renders similarly to the previous example but has better semantic structure.

Item	Quantity	Price
Apples	5	$5.00
Oranges	3	$3.50
Total		$8.50

Spanning Rows and Columns

Sometimes, a cell needs to span across multiple columns or rows. This is achieved using the `colspan` and `rowspan` attributes on <td> or <th> elements.

`colspan="number"`: Makes the cell span horizontally across the specified `number` of columns.
`rowspan="number"`: Makes the cell span vertically across the specified `number` of rows.

Example: Spanning

<table border="1">
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <th>9:00 AM</th>
    <td>Meeting</td>
    <td rowspan="2">Project Work</td> <!-- Spans 2 rows -->
  </tr>
  <tr>
    <th>10:00 AM</th>
    <td>Break</td>
    <!-- Cell for Tuesday 10:00 is covered by rowspan -->
  </tr>
  <tr>
    <th>11:00 AM</th>
    <td colspan="2">Team Sync</td> <!-- Spans 2 columns -->
  </tr>
</table>

Renders as:

Time	Monday	Tuesday
9:00 AM	Meeting	Project Work
10:00 AM	Break	Project Work
11:00 AM	Team Sync

Table Headers and Captions

Table Headers (<th>) Revisited

As shown earlier, <th> defines header cells. They provide context for the data in their corresponding row or column.

You can use the `scope` attribute on <th> to explicitly define whether it's a header for a `col` (column) or a `row`.

<table border="1">
  <tr>
    <th></th> <!-- Empty corner cell -->
    <th scope="col">Score 1</th>
    <th scope="col">Score 2</th>
  </tr>
  <tr>
    <th scope="row">Student A</th>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <th scope="row">Student B</th>
    <td>78</td>
    <td>88</td>
  </tr>
</table>

Using `scope` improves table accessibility for screen readers.

Table Captions (<caption>)

The <caption> tag provides a title or description for the table. It should be placed immediately after the opening <table> tag.

<table border="1">
  <caption>Monthly Sales Figures</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,500</td>
    </tr>
  </tbody>
</table>

Renders as:

Monthly Sales Figures
Month	Sales
January	$10,000
February	$12,500