🎓 A1Learner
🔍

HTML Tables

A table is data arranged in rows and columns. The table element builds a table from row elements and cell elements.

Rows hold cells

The tr element makes one row. Cells sit inside the row in order.

<table>
<tr>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>Ben</td>
<td>9</td>
</tr>
</table>

Header cells label the columns

The th element makes a header cell. Header cells label what each column holds.

<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>10</td>
</tr>
</table>

Data cells hold values

The td element makes a data cell. Each data cell holds one value from the data set.

<table>
<tr>
<th>City</th>
<th>Rain</th>
</tr>
<tr>
<td>Oslo</td>
<td>High</td>
</tr>
<tr>
<td>Lima</td>
<td>Low</td>
</tr>
</table>

A caption titles the table

The caption element gives a table a title. It sits first inside the table element.

<table>
<caption>Team Scores</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>10</td>
</tr>
</table>

Example

<!DOCTYPE html>
<html>
<head>
<title>Team Scores</title>
</head>
<body>
<h1>Team Scores</h1>
<table>
<caption>Scores by player</caption>
<tr>
<th>Player</th>
<th>Score</th>
</tr>
<tr>
<td>Ana</td>
<td>10</td>
</tr>
<tr>
<td>Ben</td>
<td>9</td>
</tr>
</table>
</body>
</html>

Key points

  • table element: the container for rows and cells
  • tr element: one row in a table
  • th element: a header cell that labels a column or a row
  • td element: a data cell that holds one value
  • caption element: a title for a table, written first inside it
  • A table groups values into rows, and each row groups its cells.

In this example, the caption gives the table its title. The first row holds two header cells. The header cells label the two columns. Each later row holds one player name and one score. The name and the score each sit in a data cell.

Note

Header cells show bold and centered by default.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

Which element makes one row in a table?