Let's make a table

A class timetable, a price list, a menu — when information lines up vertically and horizontally, the easiest thing to read is a table. There are a few more parts than usual, so you might tense up, but it’s OK. It’s just “combining boxes.”

Start with a small table

Let’s make the smallest possible table: 2 rows and 2 columns.

<table>
  <tr>
    <td>Apple</td>
    <td>150 yen</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>100 yen</td>
  </tr>
</table>

Broken apart, here’s what each part means.

“Table → row → cell,” a nesting that gets smaller step by step. For now, just get this order down.

Heading cells use th

Making the top row a heading, like “Item / Price,” makes it much easier to read. For heading cells, use <th> (table header) instead of <td>.

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>150 yen</td>
  </tr>
</table>

Cells written with <th> become bold and centered in most browsers, signaling “this is a heading.” Here’s how it actually looks.

Give the table a title (caption)

<caption> says in a few words what the table is about. It’s a title tag just for tables, and you write it on the very next line after you open <table>.

<table>
  <caption>Fruit prices</caption>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>150 yen</td>
  </tr>
</table>

It’s similar to placing a heading tag (like <h2>) above the table, but the difference is that <caption> is treated as part of the table itself. It also tells screen-reading software “this is the ‘Fruit prices’ table,” so the table’s meaning becomes much clearer.

Make a cell span wide (colspan)

When you want one cell to take up two columns’ worth, like “February plans,” add colspan="2".

<tr>
  <th colspan="2">February plans</th>
</tr>
<tr>
  <td>Feb 1</td>
  <td>Day off</td>
</tr>

A cell with colspan="2" joins with the neighboring cell and spreads to two cells wide.

To join cells vertically, use rowspan. For example, to make a “Morning” cell two rows tall, it’s like this.

<tr>
  <th rowspan="2">Morning</th>
  <td>Japanese</td>
</tr>
<tr>
  <td>Math</td>
</tr>

The “Morning” cell stretches down and spans the two rows of Japanese and Math. The key point is that you don’t write a “Morning” cell in the second row — because the cell stretching down from the row above is already using that spot.

Common mistakes and how to fix them

Because tables nest deeply, they’re tags where mistakes happen easily. Let’s get to know the typical stumbles.

Writing <td> directly inside <table>. A cell always goes inside a <tr> (row). Skip the row “container” and the browser can’t assemble it as a table, so the text can spill out and end up sitting outside the table.

Forgetting a closing tag. Forget to close any of </td>, </tr>, or </table>, and the rows after it shift, or even the text after the table gets swept into it. When writing a table, it’s safest to check “open it, close it” one set at a time as you go.

Choosing between <th> and <td> by appearance. “I’ll use <th> because I want it bold” is a source of mistakes. <th> is only for cells that carry the meaning of a heading. If you just want bold, you can change that however you like with the CSS you’ll learn later.

Summary of this lesson

1. Build a table by nesting <table> (whole) → <tr> (row) → <td> (cell)
2. Heading cells are <th>, not <td>, and the table’s title is <caption>
3. Keep the same number of cells in every row and it won’t go crooked (count the colspan and rowspan parts too)
4. Borders and color are CSS’s job. Use tables for lining up data