Simple tables

Present data in rows and columns with the table, tr, th and td tags.

6 min · 3 questions

A timetable, a price list, a sports ranking: some information naturally reads in rows and columns. That is what HTML tables are for. Three tags are enough to get started: <table> wraps the whole table, <tr> (table row) creates a row, and <td> (table data) creates a cell inside a row.

<table>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>0.30 euros</td>
  </tr>
</table>

To give each column a title, replace <td> with <th> (table header) in the first row. The browser displays these header cells in bold and centered, which sets them apart from the data.

<table>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.50 euros</td>
  </tr>
</table>

The browser builds the table row by row: the first cell of each <tr> lands in the first column, the second cell in the second column, and so on. By default, a table displays without visible borders: that is normal - the appearance (lines, colors, spacing) will be handled later with CSS.

Knowledge check

Make sure you remember the key points of this lesson.

1. Which tag creates a table row?
   • <td>
   • <tr>
   • <table>
   • <row>
2. What is the difference between <td> and <th>?
   • <th> creates a header cell, <td> a data cell
   • <th> creates a whole table, <td> a row
   • None, the two are interchangeable
3. What should an HTML table be used for?
   • Laying out the entire site
   • Presenting data in rows and columns
   • Replacing bulleted lists