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. Put these lines back in order to get a valid table with one row and one cell.

   <table>
   <tr>
   <td>1</td>
   </tr>
   </table>

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