HTML Tables

When to use tables

Tables are for tabular data: rows and columns of related information, such as marks, prices or timetables. Do not use tables to lay out a whole page.

A basic table

<table border="1">
  <tr>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Maths</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Science</td>
    <td>88</td>
  </tr>
</table>

• <table> wraps everything.
• <tr> is a table row.
• <th> is a header cell.
• <td> is a data cell.

Better structure

<table>
  <caption>Term 1 Results</caption>
  <thead>
    <tr><th>Subject</th><th>Marks</th></tr>
  </thead>
  <tbody>
    <tr><td>Maths</td><td>92</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>92</td></tr>
  </tfoot>
</table>

<caption> gives the table a title, and <thead>, <tbody> and <tfoot> group the rows.

Merging cells

<table border="1">
  <tr><th colspan="2">Timetable</th></tr>
  <tr><td rowspan="2">Monday</td><td>Maths</td></tr>
  <tr><td>Science</td></tr>
</table>

• colspan merges columns.
• rowspan merges rows.

Style it with CSS

The border="1" attribute is only for quick practice. In real projects use CSS for borders, spacing and colours. You will learn how in the CSS course.

Practice

Create a weekly study timetable table with days as rows and subjects as columns.