Table Basics
Today we look at data tables: the table tag, rows with tr, header cells with th, and data cells with td.
- 1
What a table is
Last lesson we grouped items in lists. Today we show data that has rows and columns — a scorecard, a price list, a timetable. That shape is a table.
In HTML the outer box is
<table>. Each row is<tr>. Header labels use<th>. Data values use<td>. - 2
The Tabular Data Dilemma: Why Paragraphs Can't Draw Grids
Lists are fine for a line of items. They cannot say “this number belongs under Score, and that name belongs under Team”. People needed a grid where each cell sits at a clear row and column.
So HTML uses
<table>for the grid,<tr>for each row,<th>for column titles, and<td>for the cells that hold the values. Use a table for tabular data, not to build a whole page layout. - 3
How Browsers Calculate Table Geometry and Alignment
The browser opens
<table>, then draws each<tr>as a row. Inside a row,<th>cells are treated as headers, and<td>cells as data. Keep the same number of cells in every row so the columns line up.In the example below, the first row labels Team and Score. The next two rows hold the match scores.
- 4
Hands-On: Constructing a Clean Match Scorecard Grid
Read the small score table below, then look at the browser pane. Merging cells with colspan comes in the next lesson.
- 5
The Golden Rule: Tabular Data Only, Never for Page Layout
Put real rows and columns of related data in a table. Do not use
<table>only to place a sidebar next to content. That job belongs to CSS later.
Defines title of a column or row. Bold and centered by default. Screen readers announce this header before reading data values in its column.
Contains actual data values. Regular weight and left-aligned by default. Connected hierarchically to corresponding header cells.
What you'll learn
- 1Tables show rows and columns of data
- 2table wraps the whole grid
- 3tr is one row
- 4th labels a column
- 5td holds a data value
Line by line
<table> ... </table>The outer grid. Every row nests inside this tag.
<tr> ... </tr>One table row. The first row here holds headers. The next rows hold data.
<th>Team</th>A header cell. It labels the column so people know what the numbers mean.
<td>287</td>A data cell. Put the actual value here — a name, a score, a price.
Try it yourself
Make a two-column table of three favourite meals: Dish and Rating. Use <th> for the header row and <td> for each value. Keep every row the same width — two cells each.
Hint: <table>, then rows of <tr>, each with matching cells.
Common mistakes
- 1.Using a table only to place a sidebar next to content. Tables are for data. Layout belongs to CSS.
- 2.Using only
<td>with no<th>. Without headers, the grid is a set of mystery numbers.
Interview prep (Click to reveal)
Q: Why should HTML tables never be used for multi-column page layouts?↓
Using tables for layout destroys web accessibility because screen readers announce row and column counts out of context. It also makes responsive mobile layouts nearly impossible compared to modern CSS Flexbox and CSS Grid.
Q: What is the semantic difference between <th> and <td>?↓
<th> represents a header label for an entire column or row (often paired with scope="col" or scope="row"). <td> represents an individual piece of raw data belonging to that header.
Q: What are <thead>, <tbody>, and <tfoot> used for?↓
They group rows into header, body, and summary footer segments. Browsers can use these tags to allow long tables to scroll independently while keeping headers fixed, or repeat headers across printed pages.