HTML table basics

A table starts with <table>; each row is a <tr>, a normal cell is a <td> and a header cell is a <th>. Tables are for tabular data only, not for laying out a page.

<table>
  <caption>Weekly plan</caption>
  <tr><th>Day</th><th>Task</th></tr>
  <tr><td>Mon</td><td>HTML</td></tr>
  <tr><td>Tue</td><td>CSS</td></tr>
</table>

When a cell must stretch over several columns use colspan, over several rows use rowspan. The number says how many cells are merged.

<table>
  <tr><th colspan="2">Prices</th></tr>
  <tr><td>Tea</td><td>1.00</td></tr>
  <tr><td rowspan="2">Cake</td><td>3.50</td></tr>
  <tr><td>4.00</td></tr>
</table>

Divide long tables into <thead>, <tbody> and <tfoot>. Writing scope="col" or scope="row" on <th> tells a screen reader what the header belongs to. <caption> gives the table a title.

<table>
  <caption>Scores</caption>
  <thead><tr><th scope="col">Name</th><th scope="col">Points</th></tr></thead>
  <tbody>
    <tr><th scope="row">Aysel</th><td>92</td></tr>
    <tr><th scope="row">Murad</th><td>88</td></tr>
  </tbody>
</table>

• Style borders and colours with CSS, not HTML attributes.