Table Basics: table, tr, td

Tables are excellent for displaying data in rows and columns - for example, an overview of Finn's favourite players with name, position, and club.

Three elements for a table

A table consists of three nested elements:

<table>: wraps the entire table.
<tr> ("table row"): a single row.
<td> ("table data"): a single cell within a row.

A first table

<table>
  <tr>
    <td>Name</td>
    <td>Position</td>
  </tr>
  <tr>
    <td>Finn</td>
    <td>Striker</td>
  </tr>
</table>

Important for understanding the nesting: each <tr> represents one horizontal row. Within each row you place as many <td> cells as the table has columns. In this example, the table has 2 rows and 2 columns.

Achtung: Every row (<tr>) should always have the same number of <td> cells. If one row suddenly has fewer or more cells than the others, the table often ends up looking unexpected in the browser.

Finn's player list as a table

Create a table with Finn's favourite players on players.html:

players.html

<h2>My Favourite Players</h2>
<table>
  <tr>
    <td>Name</td>
    <td>Position</td>
    <td>Club</td>
  </tr>
  <tr>
    <td>Player A</td>
    <td>Striker</td>
    <td>Club A</td>
  </tr>
  <tr>
    <td>Player B</td>
    <td>Goalkeeper</td>
    <td>Club B</td>
  </tr>
</table>

Tipp: Feel free to replace "Player A", "Club A", and so on with your own real favourite players and clubs!

Save and look at the result in your browser. You'll notice: without CSS, the table still looks quite plain - no visible lines between the cells. That's normal again: lines, colours, and spacing only come with CSS. The pure structure - which data sits in which row and column - is already fully correct regardless, and just as readable for screen readers and search engines as a nicely styled table.