facebook google plus twitter
Webucator's Free HTML Training Tutorial

Lesson: HTML Tables

Welcome to our free HTML Training tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

In this lesson, you will learn to create HTML tables.

Lesson Goals

  • Learn to add HTML tables to web pages.
  • Learn to break up tables into head, body, and foot sections.
  • Learn to merge table cells.

Creating Tables

Tables are made up of one or more table rows, which contain one or more table cells. The tag for creating tables is <table>. The table row tag is <tr> and the two tags that can create table cells are <td> and <th>. Below is a simple table.

Tables/Demos/table-homeruns.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Run Hitters</title>
</head>
<body>
  <table>
    <caption>All-time Home Run Records</caption>
    <tr>
      <th>Player</th>
      <th>Home Runs</th>
      <th>Team</th>
    </tr>
    <tr>
      <td>Barry Bonds</td>
      <td>762</td>
      <td>Giants</td>
    </tr>
    <tr>
      <td>Hank Aaron</td>
      <td>755</td>
      <td>Braves</td>
    </tr>
    <tr>
      <td>Babe Ruth</td>
      <td>714</td>
      <td>Yankees</td>
    </tr>
    <tr>
      <td>Alex Rodriguez</td>
      <td>696</td>
      <td>Yankees</td>
    </tr>
    <tr>
      <td>Willie Mays</td>
      <td>660</td>
      <td>Giants</td>
    </tr>
  </table>
</body>
</html>

The <th> elements are table header cells. By default, their content will be centered and bolded. The <td> elements are table data cells. By default, their content will be plain text and left aligned.

The display of tables (background colors, borders, column width, row height, etc.) can be controlled with CSS.

Adding a Caption

The table above has a caption, which is added by inserting the <caption> tag after the open <table> tag:

<table>
	<caption>All-time Home Run Records</caption>
	<tr>...

The image below shows how this table will be rendered in the browser:Home Run Record List Rendered

thead, tbody, and tfoot

Table rows (<tr> elements) can be divided into <thead>, <tbody>, and <tfoot> elements. If these elements are left off, it is assumed that all table rows are part of the tbody. We can illustrate this with Google Chrome (other browsers also have this feature).

  1. Open Tables/Demos/table-homeruns.html in Google Chrome.
  2. Right-click anywhere on the page and select Inspect.Google Chrome Inspect
  3. This will open Google Chrome's Developer Tools on the Elements tab. You may need to click on the tags to open them.tbody

From the above screenshot, you see that Google Chrome considers this table to have a tbody element even though there are no <tbody> tags in the code.

The first row really should be in a <thead> tag and the rest of the rows should be in a <tbody> tag, so let's fix that:

Tables/Demos/table-homeruns2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home Run Hitters</title>
</head>
<body>
  <table>
    <caption>All-time Home Run Records</caption>
    <thead>
      <tr>
        <th>Player</th>
        <th>Home Runs</th>
        <th>Team</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Barry Bonds</td>
        <td>762</td>
        <td>Giants</td>
      </tr>
      <tr>
        <td>Hank Aaron</td>
        <td>755</td>
        <td>Braves</td>
      </tr>
      <tr>
        <td>Babe Ruth</td>
        <td>714</td>
        <td>Yankees</td>
      </tr>
      <tr>
        <td>Alex Rodriguez</td>
        <td>696</td>
        <td>Yankees</td>
      </tr>
      <tr>
        <td>Willie Mays</td>
        <td>660</td>
        <td>Giants</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Totals</td>
        <td>3,587</td>
        <td>N/A</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

Code Explanation

As you can see, we have broken up the rows into a thead section and tbody section. We have also added a new table row in a tfoot element.

The look of the page will not change, but when we inspect it with Google Chrome, we see that it now "sees" the different sections:thead,tbody,tfoot

You may be wondering why separating table rows into sections is useful if the browser doesn't display the different sections in different ways. Web pages are styled with CSS and this separation makes it much easier to style different sections of the table to create a table like this:styled table

We aren't ready to cover CSS yet, but this should help you understand why it is useful to be able to identify the different sections.

Merging Cells

In HTML tables, all table rows must span the same number of columns and all table columns must span the same number of rows. Consider the following table, which has two rows:Two-Row Table

Note that the second table row has only two cells; however, it spans all three columns. In HTML, this is accomplished by adding a colspan attribute to any table cell that spans more than one column. The following code would create a table like the one above.

Tables/Demos/merging-cols.html
---- C O D E   O M I T T E D ----
<table>
<tr>
  <td>a</td>
  <td>b</td>
  <td>c</td>
</tr>
<tr>
  <td>d</td>
  <td colspan="2">e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

Spanning rows works in the same way:Two-Row Table Column Spanned

Note that the second table column has only one cell; however, it spans both rows. This is accomplished with the rowspan attribute as shown in the code below.

Tables/Demos/merging-rows.html
---- C O D E   O M I T T E D ----
<table>
<tr>
  <td>a</td>
  <td rowspan="2">b</td>
  <td>c</td>
</tr>
<tr>
  <td>d</td>
  <td>e</td>
</tr>
</table>
---- C O D E   O M I T T E D ----

Creating Tables

Duration: 20 to 30 minutes.

In this exercise, you will create a table from scratch.

  1. Open Tables/Exercises/resources.html for editing. Note that we have added some CSS in the head to style the caption and put a border on the table cells. Modify the code so the page appears as shown below. You don't need to touch the CSS.Table Listing Three Websites
  2. The links in the table should point to the following URLs.
  3. Save your work and open your new page in a browser to test it.

Solution:

Tables/Solutions/resources.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Runners Home&trade; - Resources</title>
<style>
  th, td {
    border: 1px solid black;
  }
  caption {
    font-style: italic;
  }
</style>
</head>
<body>
<h1>Resources</h1>
<table>
  <caption>Running Resources</caption>
  <thead>
    <tr>
      <th>Date Added</th>
      <th>Resource</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>6/1/20</td>
      <td><a href="http://www.bostonmarathon.com">Boston Marathon
        Homepage</a></td>
      <td>Everything you want to know about the Boston Marathon
        AND MORE</td>
    </tr>
    <tr>
      <td>6/1/20</td>
      <td><a href="http://www.runnershealth.com">Runners Health</a></td>
      <td>Great health tips for runners!</td>
    </tr>
    <tr>
      <td>6/1/20</td>
      <td><a href="http://well.blogs.nytimes.com/">New York Times
        Well Blog</a></td>
      <td>Great health tips for active people including runners!</td>
    </tr>
  </tbody>
</table>
<hr>
<p>&copy; 2020 Runners Home. All rights reserved.
For questions, send email to
<a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>