HTML Tables

When data has clear rows and columns — schedules, score sheets, price comparisons, seating charts — use an HTML table, not a pile of spaces or a fake grid made of lists. Lists taught you sets and sequences along one main axis. Tables teach you two-dimensional data: each cell sits at a row–column crossing with a label you can name. If someone asks “what is in row two, column Score?”, a table is the honest answer.

What a table is for

A table expresses relationships across a grid. Readers look down a column or across a row to compare values quickly. Assistive technologies can announce headers together with data cells when you mark headers with th instead of styling ordinary td text to look bold. That is why tables belong to tabular information — not to building an entire website’s banner, sidebar, and footer with nested table tags the way old layout tutorials once did. When your content is truly a grid of comparable facts, table markup earns its complexity.

Direct answer

• table — the whole table
• tr — a table row
• th — header cell (column or row label)
• td — data cell
  Put header labels in th so meaning is clear to people and assistive tools. Keep the number of cells consistent across rows unless you later learn advanced spanning attributes such as colspan. Use tables for data grids; use CSS and semantic sections for page layout. A short caption (shown in the second demo) names the dataset for everyone who lands on the grid.

Simple data table

Start with one header row of th cells, then data rows of td cells. This shape covers many beginner scoreboards and comparison sheets.

Reading the simple sample

• table wraps the entire grid
• Each tr is one horizontal row
• The first row uses th for column labels (“Name”, “Score”)
• Following rows use td for ordinary values
• Browser default styling may show borders lightly or not — later lessons cover borders; structure comes first
• Count cells per row: both data rows have two cells, matching the two headers
• If a row looks shifted in the browser, recount th/td tags before blaming CSS

Caption and row labels

A caption names the table for everyone. Using th in the first column can label each row when row titles matter as much as column titles. Keep the caption short and specific — “Practice quiz scores” beats a vague “Table 1”. You can still add a normal heading above the table; caption lives inside the table element itself.

Reading the caption sample

• caption should be the first child inside table in common beginner patterns
• Column headers stay in the top row as th
• Row names in the first column can also be th so “Ada” is a label, not just another number-like cell
• Remaining cells stay td for the actual scores
• You still are not building a page layout — you are describing a small dataset

Tables vs lists vs layout

• Related items or steps with one main axis → lists (ul / ol from the previous lesson)
• Values compared across rows and columns → tables
• Whole-page regions (banner, columns, footer) → semantic structure + CSS later, not giant nested layout tables
  Old “table layout” habits break responsiveness on small screens and make accessibility harder. If you catch yourself nesting tables only to position a logo beside a menu, stop and wait for layout lessons. The question to ask is: “Am I comparing cells in a grid, or am I only trying to draw boxes on the page?”

Accessibility habits for grids

Prefer real th headers over bold td text that only looks like a header visually. A clear caption (or a nearby heading) tells readers what the grid is about before they enter it. Keep row cell counts aligned so columns stay honest when someone tabs or swipes through. Advanced attributes such as scope improve header association for complex tables — learn the basic th/td split solidly first, then refine. Never rely on color alone to mark which cells are labels.

Practice in your editor

1. Create a table with two header cells (th) in the first row.
2. Add three data rows with matching td counts.
3. View it in the browser and confirm the grid reads left-to-right, top-to-bottom as you expect.
4. Optionally add a caption and turn the first column into row-label th cells like the second sample.
5. Deliberately break one row with a missing cell, note the odd shape, then fix it.
6. Write one sentence above the table or inside the caption stating what the data measures.
7. Ask a classmate which column is which using only your headers — if they guess wrong, rename the th text.

Easy mistakes

• Building whole websites as giant nested tables (legacy layout habit)
• Using only td when cells are truly headers
• Mismatched numbers of cells per row
• Using a table where a simple ul/ol would express a single list better
• Leaving the table without any human-readable title (caption or heading)
• Copying ancient “layout table” snippets into modern practice pages

How this fits after lists

Lists organize one-dimensional collections. Tables organize grids. You will soon style borders and spacing in following lessons; this session locks the skeleton: table, tr, th, and td with honest headers. Keep data tabular, keep page layout elsewhere, and your later CSS work will decorate a structure that already makes sense to humans and assistive tools. If a classmate only needs a grocery list, send them back to ul — reserve tables for true row-and-column comparisons.

Summary

• Tables use table + tr + th / td
• Use them for tabular data grids, not modern full-page layout
• Prefer th for header labels (columns and, when useful, rows)
• caption helps name the dataset for readers and tools
• Keep cell counts consistent across rows
• Lists remain better for simple sets and steps without a second axis
• Next table lessons can focus on borders once this skeleton feels natural