Tables

rhubarb table

A table

Going back to our rhubarb example, we observe that certain types of data are naturally organized in the form of a table.

In older web pages you will find tables being used for styling, such as to organize paragraphs into columns. This is not good current practice, as elements should be used to show the roles of information, not to provide styling.

Creating tables

Here's how to put together a table:

  • Use a table element (tag name table) for the entire table.
  • Inside the table element, use a table row element (tag name tr) for each row.
  • Use a table header element (tag name th) for each header entry in a row.
  • Use a table data element (tag name td) for each data entry in a row.

Headers often appear either as the first row in the table, as the first items in rows, or both. There can also be tables without headers at all.

This simple table is used to compare an orange and a block. Notice that the headers appear in the first row.

projectiles
 <table>
  <tr>
    <th>
      Orange
    </th>
    <th>
      Block
    </th>
  </tr>
  <tr>
    <td>
      Soft
    </td>
    <td>
      Hard
    </td>
  </tr>
  <tr>
    <td>
      Sphere
    </td>
    <td>
      Cube
    </td>
  </tr>
</table>
tree showing projectiles

Tree representations of tables

Notice how the tree representation shows the way table data elementsAn element for a data item in a table. and table header elementsAn element for a header in a table. are children of table row elementsAn element for the row of a table. , which in turn are children of the table elementAn element for a table. .

Styling tables

In styling the table, we are using a few properties that we saw in earlier modules, allowing us to style the text in the table header elementsAn element for a header in a table. and the background colour in the table data elementsAn element for a data item in a table..

Glimpse of the future

The styling of the table includes a border around the table data elements and some padding between the content and the border; these will be discussed in the upcoming module on layout.

There are also some useful properties that can be used to style the table elementAn element for a table. . The example uses the border-collapse property (border-collapse) to remove the space between entries, setting the value to collapse. The default value of the property is separate, which results in some space between table cells.

Caution!

The material on styling is CSS, not HTML.

Another type of styling for tables relates to how empty cells are displayed. The value of the empty-cells property (empty-cells) can be set to either show (the default) or hide (removes background and borders from empty cells).

Using headers for rows

In the rhubarb identification table, we have headers not only for each column, but also for each row. Here is an example of a row in the table; you can see that the checkmarks are entitiesA special code for indicating a reserved character.:

<tr>
  <th>Starts with R</th>
  <td>&#10003;</td>
  <td>&#10003;</td>
  <td>&#10003;</td>      
  <td></td>
</tr>

More about tables

Just like lists can contain lists, tables can contain lists or tables.

Glimpse of the future

In a later module, we will explore other aspects, more than you need to know about tables.