Codeloft
0 0 XP
Lesson 5 of 8
01Your first web page02Headings and emphasis03Links and images04Lists05Tables for data06Forms that collect input07Page structure08Page title and description

Tables for data

7 min 20 XP + 10 for no hints

Tables show data in rows and columns, like a timetable or a price list. <table> wraps everything, and each row is a <tr> (table row).

Inside a row, header cells use <th> and ordinary cells use <td> (table data). Header cells tell screen readers what each column means. A <caption> gives the whole table a title.

Use tables only for data. For page layout, CSS flexbox and grid do a much better job.

Example
<table>
  <tr><th>Day</th><th>Class</th></tr>
  <tr><td>Monday</td><td>Maths</td></tr>
  <tr><td>Tuesday</td><td>Science</td></tr>
</table>
Every row needs the same number of cells, or the columns won't line up.

Your tasks

0 of 3 done
  1. Add at least 2 data rows made of <td> cells
  2. Give every data row 2 cells, to match the headers
  3. Add a <caption> that describes the table

Quick check

Which tag makes a header cell?

ListsForms that collect input
prices.htmlUpdates as you type