HTML Tables: table, tr, th and td with Examples

Tables display data in rows and columns: timetables, price lists, scores, comparisons. In HTML, a table is built row by row.

A basic table#

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Asha</td>
    <td>Maths</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>Science</td>
    <td>87</td>
  </tr>
</table>

There is no element for a column. Columns come from the cells: the first cell in each row is column one, the second is column two, and so on. Every row should have the same number of cells.

Borders#

By default, tables have no visible borders. Add them with CSS. This preview includes a small <style> block; you will learn CSS in the CSS course:

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
<table>
  <tr><th>Day</th><th>Opens</th><th>Closes</th></tr>
  <tr><td>Monday</td><td>9:00</td><td>18:00</td></tr>
  <tr><td>Saturday</td><td>10:00</td><td>14:00</td></tr>
</table>

border-collapse: collapse merges the borders of neighbouring cells into single lines. You may see an old border="1" attribute on <table> in old code; use CSS instead.

Header cells for rows#

<th> can also label a row. Here each row starts with a header for the city (the temperatures are sample values):

<table>
  <tr><th></th><th>Max °C</th><th>Min °C</th></tr>
  <tr><th>Delhi</th><td>41</td><td>28</td></tr>
  <tr><th>Shimla</th><td>24</td><td>14</td></tr>
</table>

Screen readers use header cells to announce context, for example "Shimla, Max °C, 24", so users always know what a number means. Use <th> for every heading cell, not a bold <td>.

When to use tables#

Years ago, whole page layouts were built with tables. This makes pages hard to read with screen readers and hard to adapt to phones. Today, layout is done with CSS Flexbox and Grid.

Wide tables on small screens#

A table with many columns can be wider than a phone screen. A common solution is to wrap it in a container that scrolls sideways, using CSS such as overflow-x: auto; on the wrapper.

Common mistakes#

Practice#

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #999; padding: 6px 12px; }
</style>
<table>
  <tr><th>Fruit</th><th>Colour</th><th>Price per kg (₹)</th></tr>
  <tr><td>Mango</td><td>Yellow</td><td>120</td></tr>
  <tr><td>Grapes</td><td>Green</td><td>90</td></tr>
  <tr><td>Pomegranate</td><td>Red</td><td>160</td></tr>
</table>

Key takeaway#