Building Tables

Some information fits best in a grid - think of a class schedule, a price list, or scores from a game. HTML tables let you lay content out in rows and columns, a bit like a simple spreadsheet.

The basic pieces of a table

A table starts with the table tag, which wraps around everything. Inside it, each row is created with a tr tag, short for "table row". Inside each row, individual cells are created with td tags, short for "table data".

<table>
<tr>
<td>Monday</td>
<td>Art Class</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Music Class</td>
</tr>
</table>

Notice the three levels of nesting: the table holds rows, and each row holds cells. This example makes a simple grid with two rows and two columns.

Header cells

Often the first row of a table is a header describing what each column means, like "Day" and "Activity". For header cells, use th instead of td. Browsers usually show header cells in bold and centered, so visitors can spot them right away.

<table>
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Art Class</td>
</tr>
</table>

When to reach for a table

Before adding a table to your own page, ask yourself: does this information really have rows and columns? A weekly schedule, a list of prices, or a set of scores are all great fits. A list of hobbies or a paragraph of text is usually better as a list or a paragraph instead, using what you learned in earlier lessons.

You now know the three building blocks of every table: table for the container, tr for each row, and td or th for each cell. That is enough to build tables for almost anything you will need on a beginner website.