Free HTML tutorial

HTML Tables

HTML tables organize related information into rows and columns. Use table elements for data that belongs in a grid, not as a tool for laying out an entire web page.

Build a simple data table

Use <table> as the container, <tr> for each row, <th> for headings and <td> for data cells.

<table>
  <caption>Weekly study plan</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>HTML</td></tr>
    <tr><th scope="row">Tuesday</th><td>CSS</td></tr>
  </tbody>
</table>

Use headings and captions

A caption names the table. Mark row or column headings with <th> and choose an appropriate scope value so assistive technologies can associate headings with their data.

For narrow screens, let a wide data table scroll horizontally instead of shrinking its text until it is hard to read.