FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Data

Intermediate

Table Headers

Learn Table Headers with practical examples for tables, lists, structured data relationships, accessibility, SEO and live practice.

HTML data structures

Table headers give data cells their meaning.

A table without proper headers can look readable to sighted users but become confusing for screen reader users and anyone scanning complex data.

Header cells use th, not td. A column header labels values below it. A row header labels values beside it.

For simple tables, scope is usually enough. For complex tables, ids and headers can create more precise relationships.

th

A header cell that labels row or column data.

scope="col"

The header applies to cells below it in the same column.

scope="row"

The header applies to cells beside it in the same row.

headers/id

A more explicit relationship for complex tables.

Syntax and structure

Use th and scope instead of visual bold text.

A bold td looks like a header. A th behaves like a header.

Column and row headers

<table>
  <caption>Course modules</caption>
  <tr>
    <th scope="col">Module</th>
    <th scope="col">Level</th>
    <th scope="col">Status</th>
  </tr>
  <tr>
    <th scope="row">HTML Tables</th>
    <td>Beginner</td>
    <td>Ready</td>
  </tr>
</table>

Headers faked with bold text

<table>
  <tr><td><strong>Module</strong></td><td><strong>Status</strong></td></tr>
  <tr><td>HTML Tables</td><td>Ready</td></tr>
</table>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<table>
  <caption>Course modules</caption>
  <tr>
    <th scope="col">Module</th>
    <th scope="col">Level</th>
    <th scope="col">Status</th>
  </tr>
  <tr>
    <th scope="row">HTML Tables</th>
    <td>Beginner</td>
    <td>Ready</td>
  </tr>
</table>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <table>
    <caption>Training modules</caption>
    <tr><th scope="col">Module</th><th scope="col">Difficulty</th><th scope="col">Done</th></tr>
    <tr><th scope="row">Mirrors</th><td>Basic</td><td>Yes</td></tr>
    <tr><th scope="row">Highway</th><td>Advanced</td><td>No</td></tr>
  </table>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  color: #f7f7f4;
}

caption {
  caption-side: top;
  margin-bottom: 12px;
  color: #8cffc1;
  font-weight: 900;
  text-align: left;
}

th, td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

th {
  color: #8cffc1;
  font-weight: 900;
}

ul, ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
  color: #cfd8e6;
}

li::marker {
  color: #8cffc1;
  font-weight: 900;
}

dl {
  margin: 0;
}
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<table>
  <tr><td><strong>Module</strong></td><td><strong>Status</strong></td></tr>
  <tr><td>HTML Tables</td><td>Ready</td></tr>
</table>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Data HTML should preserve relationships, not only appearance.

Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.

Use th for labels

If a cell labels other cells, it should probably be th.

Use scope for simple tables

scope="col" and scope="row" make relationships clear.

Keep headers short

A header should be easy to repeat mentally while reading values.

Avoid empty header cells

Empty headers create unclear relationships.

Use caption with headers

The caption names the table, headers name the columns and rows.

Use headers/id for complex tables

Spanning or grouped headers may need explicit relationships.

Production thinking

Structured data markup affects accessibility, SEO and maintainability.

Why does this matter?

This matters because a number without its label is just noise. Headers turn values into information.

Accessibility

Correct headers let assistive technology announce the meaning of a value, not only the value itself.

Production note

Data exported from CMS or spreadsheets often loses header quality. Validate generated tables before publishing.

SEO note

Clear headers help crawlers and users understand comparison data, specifications and structured information.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Add a new row with a row header.
  • Change one th scope and explain why the result is wrong.
  • Add a short caption that names the table.

Practice assignment

Do this before moving to the next lesson.

  1. Create a table with both column and row headers.
  2. Use scope on every th.
  3. Test whether every value has a clear label.

Try it yourself

Repair table headers

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?