Visual data structure

Structure data with a table and figure.

Data rows with a table

To show top products in the sales panel we use a <table>. A table has three parts:

<thead>: header row
<tbody>: data rows
each row is a <tr>, each cell a <th> or <td>

Header cells use <th>, data cells use <td>; this lets screen readers announce the column name.

A figure for the KPI

A KPI (e.g. monthly revenue) is one number with a short label. We wrap it in a <figure> and label it with <figcaption>.

Figure carries a self-contained visual or numeric display; figcaption is its caption. This keeps the link between number and label semantic.

In a widget, figure and table work side by side: one summarizes, the other details.

Exercise Add a figure and a table inside the article

Take the widget shell from the previous lesson. Inside <article> first add a <figure>; it should contain a <figcaption> (content: Monthly revenue) and a <p> (content: $12,450).

Then, inside the same article, add a <table>. In <thead> put one <tr> with two <th> cells (Product, Sales). In <tbody> add at least two <tr> rows, each with two <td> cells (product name, units sold).

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sales Dashboard</title>
  </head>
  <body>
    <section>
      <header>
        <h1>Sales Dashboard</h1>
      </header>
      <main>
        <article>
          <figure>
            <figcaption>Monthly revenue</figcaption>
            <p>$12,450</p>
          </figure>
          <table>
            <thead>
              <tr>
                <th>Product</th>
                <th>Sales</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Cotton t-shirt</td>
                <td>320</td>
              </tr>
              <tr>
                <td>Linen trousers</td>
                <td>184</td>
              </tr>
            </tbody>
          </table>
        </article>
      </main>
    </section>
  </body>
</html>

Test yourself

What's the best wrapper for a KPI card (e.g. 'Monthly revenue: $12,450')?
- table — rows and columns
- ul — list
- figure — captioned visual/numeric display
- nav — menu
Show answer

figure — captioned visual/numeric display — Correct! figure + figcaption fits a KPI; it shows label and number at a glance.

Complete the table row

<tr>
  <th>____</th>
  <td>Cotton t-shirt</td>
</tr>

Show answer

<tr>
  <th>Product</th>
  <td>Cotton t-shirt</td>
</tr>

Match each table tag to its role

thead

Table head
tbody

Table body
tr

Row
th

Header cell
td

Data cell

Next lesson: Template and slot

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies