Working With Tables

Tables are used to create - obviously - tabulated data. There are a number of elements available to use with the table element in order to make data presentable, alongside styling it with some attributes and with CSS as well.

The default structure of a table is to create a table tag. It is a block element.

Example:

<table></table>

With combination of other tags available is the table element such as thead, tbody, tr and td, you can create headings for the table as well as rows, columns and the data in the table.

Simple table example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
 
  <tr>
    <td>Thomas</td>
    <td>25</td>
  </tr>
</table>

The code example above creates the following table:

It doesn't look like a table does it? This is because an attribute, as well as CSS styling need to be applied to it in order for the table to span the entire width.

Table elements

1. tr - Creates a table row
2. th - Creates a table heading
3. td - Adds table data to the cells.
4. thead - Is used to group table headings together.
5. tbody - Is used to group items in the body of the table.
6. tfoot - Is used to group table footer items.

Improved Example

<table width="100%">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
 
  <tr>
    <td>Thomas</td>
    <td>25</td>
  </tr>
</table>

In the above code snippet, the table width has been set to 100%. Therefore, it will output the following:

Table headings are centered by default, and you can adjust the width of the table by adjusting the width of the table. For example, you can have a table of width 30% or one of 3000%.

HTML Tables always have a border by default (even though they might not be visible). To remove these borders, you can add they style attribute to the table and add the property border-collapse: collapse. If you want the text to align to the left, you can also add text-align: left as well. For example:

<table width="100%" style="border-collapse: collapse; text-align: left;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
 
  <tr>
    <td>Thomas</td>
    <td>25</td>
  </tr>
</table>

This will output the following:

When adding more data to your table, make sure that the columns correspond to the number of headings and rows so that you don't get a weird-looking table. For example:

<table width="100%">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
 
  <!--
Adding new items to the table. Notice that for each row,
there are two table cells corresponding to the only two headings
that we have
-->
 
  <tr>
    <td>Tony</td>
    <td>25</td>
  </tr>
 
  <tr>
    <td>Luke</td>
    <td>30</td>
  </tr>
 
  <tr>
    <td>Thomas</td>
    <td>38</td>
  </tr>
</table>

The above example will output the following:

Advanced Tables

Chances are that in your career as a web developer, you will have to build simple tables like the one above, as well as more advanced tables such as a school timetable.

In such a case, we will employ the same techniques when we built the Simple Table Example above.

Take a look at the example below which is a table that shows the Timetable for my ficitional school:

<table width="100%" style="text-align: left; border-collapse: collapse;">
  <caption style="margin-bottom: 1rem">
    Timetable for TsbSankara's Totally Awesome School
  </caption>
 
  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <td>8am - 9am</td>
      <td>Maths</td>
      <td>English</td>
      <td>Kiswahili</td>
      <td>French</td>
      <td>Geography</td>
    </tr>
 
    <tr>
      <td>10am - 11am</td>
      <td>Geography</td>
      <td>Maths</td>
      <td>English</td>
      <td>Kiswahili</td>
      <td>French</td>
    </tr>
 
    <tr>
      <td>12pm - 1pm</td>
      <td>Chemistry</td>
      <td>Physics</td>
      <td>Agriculture</td>
      <td>Biology</td>
      <td>Homescience</td>
    </tr>
  </tbody>
</table>

The caption element is used to add a caption for the table. Read more about the caption element in the module about HTML Tags

In the example above, we have introduced new elements: the thead and tbody. These elements are used to group headings and body items respectively in the table.

The example above is going to output the following:

You can then go ahead to style out your table however you want.

For example, in the example above, you will notice that the text is a bit too squeezed. What you can do is increase the padding all around the elements, i.e the th and td which hold the content.

<table width="100%" style="text-align: left; border-collapse: collapse;">
  <!-- Showing only the code that has changed -->
  <thead>
    <tr>
      <th style="padding: 0.5rem 0.2rem;">Time</th>
      <th style="padding: 0.5rem 0.2rem;">Monday</th>
      <th style="padding: 0.5rem 0.2rem;">Tuesday</th>
      <th style="padding: 0.5rem 0.2rem;">Wednesday</th>
      <th style="padding: 0.5rem 0.2rem;">Thursday</th>
      <th style="padding: 0.5rem 0.2rem;">Friday</th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <td style="padding: 0.5rem 0.2rem;">8am - 9am</td>
      <td style="padding: 0.5rem 0.2rem;">Maths</td>
      <td style="padding: 0.5rem 0.2rem;">English</td>
      <td style="padding: 0.5rem 0.2rem;">Kiswahili</td>
      <td style="padding: 0.5rem 0.2rem;">French</td>
      <td style="padding: 0.5rem 0.2rem;">Geography</td>
    </tr>
 
    <tr>
      <td style="padding: 0.5rem 0.2rem;">10am - 11am</td>
      <td style="padding: 0.5rem 0.2rem;">Geography</td>
      <td style="padding: 0.5rem 0.2rem;">Maths</td>
      <td style="padding: 0.5rem 0.2rem;">English</td>
      <td style="padding: 0.5rem 0.2rem;">Kiswahili</td>
      <td style="padding: 0.5rem 0.2rem;">French</td>
    </tr>
 
    <tr>
      <td style="padding: 0.5rem 0.2rem;">12pm - 1pm</td>
      <td style="padding: 0.5rem 0.2rem;">Chemistry</td>
      <td style="padding: 0.5rem 0.2rem;">Physics</td>
      <td style="padding: 0.5rem 0.2rem;">Agriculture</td>
      <td style="padding: 0.5rem 0.2rem;">Biology</td>
      <td style="padding: 0.5rem 0.2rem;">Homescience</td>
    </tr>
  </tbody>
</table>

The above will output:

And you can see that this is not only more readable, but also more presentable.

Adding styling as above is not feasible. This is just a small table. Imagine doing this for all HTML elements you had on your website. This is where styling with CSS comes in. More on this in the CSS modules.

Tables on mobile

If you have been using a mobile device, you must have noticed by now that the tables we have created so far are not responsive: i.e. they cause a horizontal overflow.

What you can do to such tables is add the style and then add a property called overflow and set it to auto so that when the table width or content is greater than the device width, it will automatically introduce a horizontal scrollbar for the table only - as opposed to a horizontal scrollbar for the entire website. You don't want that to happen because it will massively break your user's experience.

<table style="overflow: auto"></table>