Module 5: Tables · Lesson 1 of 5
How to Make a Table in HTML: table, tr and td
All lessons in Module 5
Goal: Put data in a table made of rows and cells.
Quick review
Two questions from earlier modules to keep them fresh.
Learn
A table lays out data in rows and columns (opens in a new tab), the way a spreadsheet or a train timetable does. You write it one row at a time:
<table>wraps the whole grid.<tr>(table row) makes one row.<td>(table data) makes one cell inside a row.
Columns have no tag. They form by themselves: the first <td> of each row lands in column one, the second in column two, and so on. So give every row the same number of cells, or the grid comes out ragged.
By default browsers draw no borders, and the preview looks like neatly lined-up text. Row and column labels follow in Headers and Captions.
The short version
- You build a table one row at a time.
<table>holds<tr>rows, and each row holds<td>cells. - No tag makes a column. The nth cell of every row lines up in column n.
- Every row needs the same number of cells, or the grid turns ragged.
- By default a table has no borders. Borders and spacing come from CSS.
Example
<table>
<tr>
<td>Mercury</td>
<td>88 days</td>
</tr>
<tr>
<td>Earth</td>
<td>365 days</td>
</tr>
</table>Your task
The vet squeezed three pets into one paragraph. Swap it for a table:
- One
<tr>row per pet, so 3 rows. - Two
<td>cells in every row: the name first, then the weight. - Delete the old paragraph.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<table>
<td>Biscuit</td>
<td>12 kg</td>
<td>Mochi</td>
<td>4 kg</td>
</table>Right
<table>
<tr>
<td>Biscuit</td>
<td>12 kg</td>
</tr>
<tr>
<td>Mochi</td>
<td>4 kg</td>
</tr>
</table>Without tr tags the browser invents a single row and crams every cell into it, so wrap each pair of cells in its own row.
Wrong
<table>
Pet weights
<tr>
<td>Biscuit</td>
<td>12 kg</td>
</tr>
</table>Right
<h2>Pet weights</h2>
<table>
<tr>
<td>Biscuit</td>
<td>12 kg</td>
</tr>
</table>Loose text inside a table gets moved out above it by the browser, so give that text a heading or a cell.
Go deeper
Inspect a simple table in your browser's developer tools and you will find an element you never typed: <tbody>. The HTML parser adds the tbody element (opens in a new tab) by itself whenever a <tr> sits directly inside <table>. You will notice this once you write CSS. The selector table > tr matches nothing, and table tr works.
The parser is strict about table contents, too. Loose text or a stray <p> between rows is moved out and shown above the table. The spec calls this foster parenting. If content mysteriously jumps to the top, look for something sitting outside a cell.
Search engines read tables well, and a clean data table sometimes shows up right in the results as a comparison or price list. Screen reader users move cell by cell and hear their position, which needs a regular grid. The Class Timetable project brings all of this together.
Wide tables overflow small screens. Wrap a big one in a <div> with overflow-x: auto, and on a phone it scrolls sideways inside that box while the page keeps its width.
Frequently asked questions
How do I make a table in HTML?
Open a <table>, add one <tr> per row, and inside each row put one <td> per cell:
<table><tr><td>Tea</td><td>$2</td></tr></table>
For more data, repeat the row with the same number of cells. Header cells come from <th>, borders from CSS. Typing out a big table gets tedious, and a generator such as HTML Table (opens in a new tab) writes the rows and cells for you with a live preview.
How do I add borders to an HTML table?
With CSS. The border attribute on <table> is a leftover from early HTML. A typical rule is table, th, td { border: 1px solid #999; border-collapse: collapse; }. The border-collapse: collapse part turns the double lines between neighbouring cells into single ones and looks much tidier. The CSS specification describes both table border models (opens in a new tab).
What do tr and td stand for?
tr means table row and td means table data, one ordinary cell. Their partner th means table header, a cell that labels a row or column. Once you know the names, the nesting follows: data cells sit inside a row, and rows sit inside the table.