Table skeleton

Build a simple table with <table>, <tr> and <td>.

What is a table?

An HTML table shows data in rows and columns. Sports results, price lists and monthly calendars are good examples. It is built from three core tags: <table> opens the table, <tr> is a row (table row), and <td> is a cell (table data).

A simple two-row table starts like this: <table><tr><td>Coffee</td><td>20 TL</td></tr></table>. Cells read left to right; rows read top to bottom.

A price list example

A simple two-row, two-column price list is written like this:

<table>
  <tr>
    <td>Coffee</td>
    <td>20 TL</td>
  </tr>
  <tr>
    <td>Tea</td>
    <td>15 TL</td>
  </tr>
</table>

Each row is a <tr>; inside it you write one <td> per column. Indentation improves readability but is not required by the browser.

Exercise Write a two-row table

Add a <table> to body. It should have at least one <tr> row; each row must contain two <td> cells. For example a price list: Coffee / 20 TL and Tea / 15 TL.

Show example solution

<body>
  <table>
    <tr>
      <td>Coffee</td>
      <td>20 TL</td>
    </tr>
    <tr>
      <td>Tea</td>
      <td>15 TL</td>
    </tr>
  </table>
</body>

Test yourself

Which tag opens a row in a table?
- <table>
- <td>
- <tr>
- <row>
Show answer

<tr> — Correct. <tr> (table row) represents one row.

Close the cell

<table>
  <tr>
    <td>Coffee</td>
    <td>Tea____
  </tr>
</table>

Show answer

<table>
  <tr>
    <td>Coffee</td>
    <td>Tea</td>
  </tr>
</table>

Match each tag to its role

<table>

Table container
<tr>

Row
<td>

Cell
<ul>

Unordered list container

Next lesson: Header cells

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies