Lists & Tables

<table>, <tr>, <th>, <td>

Tabular data with rows, headers, and cells.

1Building a Table

<table> wraps tabular data. Rows are <tr>, header cells are <th>, data cells are <td>. Always pair with <thead>, <tbody>, and a <caption>.

Example Code

css

<table>
  <caption>Monthly sales</caption>
  <thead>
    <tr><th>Month</th><th>Sales</th></tr>
  </thead>
  <tbody>
    <tr><td>Jan</td><td>$1,200</td></tr>
    <tr><td>Feb</td><td>$1,800</td></tr>
  </tbody>
</table>

2Put the element in context

Tables represent data with relationships across rows and columns. Use headers to identify those relationships and a caption to explain the table’s subject. A table should not be used merely to arrange unrelated page sections into a grid.

3Practice with a small page

Create a comparison of three services using row and column headings. Add a caption and read a single data cell together with its headers. Narrow the page and plan a readable scroll region rather than shrinking all content.

Finished reading?

Mark this topic as complete to track progress.

Next Topic