Press key to advance. Zoom in/out: Ctrl or Command + +/-.

HTML: Tables

Tables

Tables are useful for displaying tabular data on the web, like research study results.

The table element

The TABLE element contains all the elements that make up a table - the header, rows, and columns. This example shows a table of monthly savings.

<table border="1">
  <thead>
   <tr>
    <th>Month </th>
    <th>Savings </th>
   </tr>
  <tbody>
   <tr>
    <td>January </td>
    <td>$100 </td>
   </tr>
</table>
Month Savings
January $100

The table header

Most tables start with a header row with the names of the columns. The thead element starts the header area, the tr element creates a row, and th elements create cells in the row.

<table border="1">
  <thead>
   <tr>
    <th>Month </th>
    <th>Savings </th>
    </tr>
    ....
</table>
Month Savings

The table body

Tables can consist of any number of data rows after the header. The tbody element begins the body (data) area, the same tr element creates a row, and td elements create data cells in each row.

<table border="1">
  ....
  <tbody>
   <tr>
    <td>January </td>
    <td>$100 </td>
   </tr>
</table>
Month Savings
January $100
February $50

Tables: Not for Layout

Before we had better techniques, tables were often used to layout a webpage, but this is now strongly discouraged.

We will discuss better ways to do layout when we cover CSS.