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.
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.
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.
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.
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.