Tables in HTML

Practice

This practice will be based on all previous practices in the tutorial series, and will consist in the creation of a new document with, mainly, a table. Before we start, you'll need to create a new file, add it to one of the "posts" folders and fill it with the basic structure of an HTML document.

Once your file is ready, we'll begin by inserting a title (h1) and a paragraph (p) with a small description about the data we're going to present. This will be added to the body of the document. Like before, we're only displaying the contents of the body in the following examples, in order to keep them short. But remember you should have the head and other elements in your file.

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>

What I've learned so far

The following table summarizes all HTML elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.

This was just a kick-start. Now we're adding the table. Before we make any decision, we're setting up the opening and closing tags for table, a caption element with a description of the table, and one row (tr element) that, by now, won't have any cell.

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>
<table class="default">
  <caption>HTML elements I've learned so far</caption>
  <tr>
 
  </tr>
</table>

It's time to determine how many columns wide our table is going to be. At the beginning of this practice we said we're going to show name and description of the elements, so two columns seems to be allright for now. You can, later, add more columns to this structure, if you feel like it.

This first row will contain our header cells, so we're using th here, to add cells.

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>
<table class="default">
  <caption>HTML elements I've learned so far</caption>
  <tr>
    <th>Element</th>
    <th>Description</th>
  </tr>
</table>

What I've learned so far

The following table summarizes all HTML elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.

HTML elements I've learned so far
Element Description

That's looking fine. Now we're adding more rows to display information about some of the elements treated in the tutorials. These new rows will follow the first and wil contain regular cells (td).

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>
<table class="default">
  <caption>HTML elements I've learned so far</caption>
  <tr>
    <th>Element</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>html</td>
    <td>Is the container for all elements in a document</td>
  </tr>
  <tr>
    <td>head</td>
    <td>Contains the title and relational information about the document</td>
  </tr>
  <tr>
    <td>title</td>
    <td>Provides a title for the document</td>
  </tr>
  <tr>
    <td>body</td>
    <td>Is the section where the document's contents can be found</td>
  </tr>
  <tr>
    <td>h1-h6</td>
    <td>Represents a heading</td>
  </tr>
  <tr>
    <td>p</td>
    <td>Represents a paragraph</td>
  </tr>
</table>

What I've learned so far

The following table summarizes all HTML elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.

HTML elements I've learned so far
Element Description
html Is the container for all elements in a document
head Contains the title and relational information about the document
title Provides a title for the document
body Is the section where the document's contents can be found
h1-h6 Represents a heading
p Represents a paragraph

This could be a good table already. But as we always like to dig a little deeper, we're adding horizontal groups to its structure. Basically, we're wrapping the header cells in a thead container and we're dividing the other rows in thematic tbody. These groups or categories will be the same used in the elements reference table.

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>
<table class="default">
  <caption>HTML elements I've learned so far</caption>
  <thead>
    <tr>
      <th>Element</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>html</td>
      <td>Is the container for all elements in a document</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>head</td>
      <td>Contains the title and relational information about the document</td>
    </tr>
    <tr>
      <td>title</td>
      <td>Provides a title for the document</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>body</td>
      <td>Is the section where the document's contents can be found</td>
    </tr>
    <tr>
      <td>h1-h6</td>
      <td>Represents a heading</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>p</td>
      <td>Represents a paragraph</td>
    </tr>
  </tbody>
</table>

What I've learned so far

The following table summarizes all HTML elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.

HTML elements I've learned so far
Element Description
html Is the container for all elements in a document
head Contains the title and relational information about the document
title Provides a title for the document
body Is the section where the document's contents can be found
h1-h6 Represents a heading
p Represents a paragraph

Of course, this is a semantic grouping and browsers don't highlight by default the divisions between groups. So, to make the table more readable we're making these divisions clearly palpable, by adding a header row on top of each tbody group. This operation will consist of adding a row right after each tbody opening tag, containing only one header cell spanning two spaces horizontally (with the colspan attribute). Pay attention to the code.

<h1>What I've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.</p>
<table class="default">
  <caption>HTML elements I've learned so far</caption>
  <thead>
    <tr>
      <th>Element</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">The root element</th>
    </tr>
    <tr>
      <td>html</td>
      <td>Is the container for all elements in a document</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Document metadata</th>
    </tr>
    <tr>
      <td>head</td>
      <td>Contains the title and relational information about the document</td>
    </tr>
    <tr>
      <td>title</td>
      <td>Provides a title for the document</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Sections</th>
    </tr>
    <tr>
      <td>body</td>
      <td>Is the section where the document's contents can be found</td>
    </tr>
    <tr>
      <td>h1-h6</td>
      <td>Represents a heading</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="2" scope="rowgroup">Grouping content</th>
    </tr>
    <tr>
      <td>p</td>
      <td>Represents a paragraph</td>
    </tr>
  </tbody>
</table>

What I've learned so far

The following table summarizes all HTML elements I've learned so far. I know this list is short, but I expect it to grow considerably in the following weeks.

HTML elements I've learned so far
Element Description
The root element
html Is the container for all elements in a document
Document metadata
head Contains the title and relational information about the document
title Provides a title for the document
Sections
body Is the section where the document's contents can be found
h1-h6 Represents a heading
Grouping content
p Represents a paragraph

As you can see, here we used for the first time the attribute scope with the "rowgroup" value in the heading cells. With such value, we're indicating that these header cells affect all cells in the same group of rows.

And that's all with tables for now. This new knowledge should allow you to present tabular data in most usual cases. If you want to go deeper, take a look at the reference for tabular data elements.

Next tutorial ›

Prev12345