Refining Tables

In HTML5 & CSS: Structuring Pages, we learned how to use tables to structure tabular data. While tables, by definition, add structure to data, there are more options within tables in HTML to further divide and describe content. Using additional elements, an author can specify both a header and a footer section for each table, as well as the content for the body section of a table. By further defining the header, footer, and body section of a table, authors can apply styles to these sections.

Using Table Header, Table Footer, & Table Body

The following table explains the table header, footer, and body elements:

A table can have multiple table body elements, but only one table header and one table footer.

The official recommendation in HTML is to define the table header and table footer elements first, then define the table body element(s). This allows browsers to render the header and footer sections first before rendering the often numerous, and more flexible, body cells.

Our example today is a short course catalog. Let's add the table header, footer, and body markup now.

Step1. If necessary, switch to the code editor.

Step2. To open a new file, press:

Control key+o

You see the Open dialog.

Step3. To open catalog.html,

Double-Click catalog.html

We see the course catalog load in the code editor.

Step4. To add the table header, type the code in bold below [Region 32]:

<h2>Learn from Us &gt; Topics</h2>
<p>This is a work in progress. There will be many, many more courses here in the future.</p>
<table class="full-width">
<thead>
    <tr>
        <th>Title</th>
        <th>Duration (hours)</th>
        <th>Rating (1-5)</th>
        <th>Categories</th>
        <th>Views</th>
        <th>Author</th>
    </tr>
</thead>

Exiting code block.

NOTE: swipe.txt contains the entire <thead> element.

This identifies the first row of our table as a table header.

Step5. Navigate to catalog.html in the web browser.

The next table row is our table footer. Let's add this markup now.

Step6. To add the table footer, type the code in bold below [Region 33]:

</thead>
<tfoot>
    <tr>
        <td>Note: All of these courses are offered online only.</td>
    </tr>
</tfoot>

Exiting code block.

NOTE: swipe.txt contains the entire <tfoot> element.

Let's look at our page so far.

Step7. Save and refresh catalog.html.

You will notice that the cell that contains the note has been moved to the bottom of the table. It still doesn't align appropriately, but we will fix that in the next section.

Let's define the table body now.

Step8. To add the opening table body, type the code in bold below [Region 34]:

</tfoot>
    <tbody>
        <tr>
            <td>WordPress Essentials</td>
            <td>4:50</td>

Exiting code block.

Now, let's add the closing table body tag.

Step9. To add the closing table body tag, type the code in bold below [Region 35]:

       <td>479102</td>
            <td>Frank Perkins</td>
        </tr>
    </tbody>
</table>

Exiting code block.

Let's take a look at this in the web browser.

Step10. Save and refresh catalog.html.

We see that the table has been rearranged. The footer row is now at the bottom of the table:

Now that we have our table structured appropriately, let's fix the table footer's display.

Using Column & Row Spans

Sometimes a cell in a table should expand to fill more than one column or row. This is accomplished by adding an attribute to the cell that defines the number of rows and/or columns it should fill.

The attributes are colspan and rowspan and are used like this:

<table>
    <tr>
        <td colspan="2">This cell spans two columns</td>
        <td rowspan="2">This cell spans two rows</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

Exiting code block.

The above code will generate a table that looks like this (border and padding added for emphasis):

We want our table footer's data cell to span six rows. Let's add a column span to our table footer.

Step1. If necessary, activate catalog.html in the code editor.

Step2. To add the column span to the table footer's data cell, type [Region 36]:

<tfoot>
    <tr>
        <td colspan="6">Note: All of these courses are offered online only.</td>
    </tr>
</tfoot>

Exiting code block.

Let's save and refresh the page now.

Step3. Save and refresh catalog.html.

You see that the footer now spans across the entire bottom row of the table:

We won't do so today but you could create CSS to style these new table elements.

This brings us to the end of our guided workshop, but there's still more grid system work to be done.