Skip to content

Tables

Tables are great for showing organized data. Tables are wrapped inside the <table> element.

Table rows are wrapped inside <tr>. Table header cells are wrapped inside <th> and table data cells inside <td>. Table data elements (<td>) can contain text, images, lists and even other tables.

Read more about tables from here.

Example:

HTML
<table>
  <tr>
    <th></th>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Before you try these tables out

Before you try out the code samples below, add the CSS code described below in the <head> section of your site. The code below will add borders to all your tables and their cells so it is easier to see how your tables look like:

HTML
<style>
table, th, td {
    border: 1px solid black;
}
</style>

So your <head> section should end up looking something like this:

HTML
<head>
    <title>My site - Tables</title>
    <meta charset="utf-8">
    <meta name="description" content="First cool stuff">
    <style>
      table, th, td {
        border: 1px solid black;
      }
    </style>
</head>

Better semantics: using thead, tbody, tfoot

Table heading section is recommended to be wrapped inside the <thead> element, body inside <tbody> and footer section inside <tfoot>. Your table works even without these elements, but the semantical meaning of your table is better with them.

Example:

HTML
<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Full Example

HTML
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
      <th>Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Milk</td>
      <td>2.90</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Sugar</td>
      <td>0.89</td>
      <td>18</td>
    </tr>
  </tbody>
</table>

Cells that span

Your table cells can also easily span across multiple rows or columns. You can give the colspan attribute to span cells across multiple columns and rowspan to span multiple rows.

Example of colspan:

HTML
<table>
  <thead>
      <tr>
        <th>Name</th>
        <th colspan="2">Calories</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sugar</td>
      <td>Over 9000</td>
      <td>Over 9000</td>
    </tr>
    </tbody>
</table>

Example of rowspan:

HTML
<table style="width:100%">
  <tr>
    <th>User</th>
    <td>Aleksi</td>
  </tr>
  <tr>
    <th rowspan="2">Email</th>
    <td>aleksi.postari@samk.fi</td>
  </tr>
  <tr>
    <td>aleksi.postari@samk.fi</td>
  </tr>
</table>

DON'T: Tables as Layout

Tables are NOT for making layouts. Some reasons why tables should never be used for layouts:

  1. Slow to render
  2. Nightmare to maintain
  3. Break screen readers and can cause accessibility problems
  4. Making responsive tables is really, really hard

Later on during this course we will learn about CSS which you can use to create layouts.

Challenge 1: List of Groceries

Now we want to expand our grocery list exercise little bit. We want to add more information for our groceries: name, price and amount. Thus because of this I no longer recommend using lists for this as the information has grows. Now we can use tables for this.

  1. Add header List of Groceries
  2. Create a table with these headers: Name, Price, Amount and add few ingredients to your table.

Challenge 2: Create non-working navigation using the tfoot element

  1. Add tfoot element to your table.
  2. Inside your tfoot element, add these two links: Previous Page and Next Page that both link to #.