Creating Tables

While we're talking about accessibility features, let's talk about tables. Tables display information more efficiently and effectively by placing data into rows and columns. As a designer, you may be tempted to use a table as a layout device. This is not the purpose of a table. In HTML5, tables are to be used to display tabular data only.

There are several elements that go into making a table in HTML5. Today, we will discuss the <table>, <tr> (table row), <th> (table header), and <td> (table data) elements. The following example shows how these tags relate to each other:

<table>
    <tr>
        <th>Row</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <th>Row 1</th>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
    <tr>
        <th>Row 2</th>
        <td>Data 3</td>
        <td>Data 4</td>
    </tr>
</table>

Exiting code block.

This markup will be displayed, by default, like this:

NOTE: This table appears with the default table CSS of the IU Web Framework. By default, there would be no borders, no row banding, and the table would only be as wide as it needed to be to display the content.

As you can see, the contents of the <th> elements are bold and centered and the contents of the <td> elements are non-bold, left aligned text by default. Notice that there are no cell borders. Borders are created with CSS. We will explore borders later.

Let's take a look at what the different table elements mean semantically:

We have one place in our content today that contains tabular data. Right now, the content isn't very readable:

Let's add the needed markup now.

Step1. To add the <table> element, type:

<section id="distance" class="question-answer">
    <h2>How far do tourists ride each day?</h2>
    <p>Table with average mileages for beginner, intermediate, and advanced tours.</p>
    <table>
        Level
        Average Daily Mileage
        Average Daily Elevation Gain
        Average Overall Trip Length

        Beginner
        30 mi (48 km)
        &lt; 1000 ft (&lt; 300 m)
        &lt; 400 mi (&lt; 645 km)

        Intermediate
        50 mi (80 km)
        1,500 ft (460 m)
        400 - 800 mi (645 - 1,290 km)

        Advanced
        75 mi + (120 km +)
        2,000 ft + (690 m +)
        800 mi + (1,290 km +)
    </table>
</section>

Exiting code block.

As you can infer from the whitespace in our document, we have four rows, each with four data cells. Let's define the rows now.

Step2. To add rows to the table, type:

<table>
    <tr>
        Level
        Average Daily Mileage
        Average Daily Elevation Gain
        Average Overall Trip Length
    </tr>
    <tr>
        Beginner
        30 mi (48 km)
        &lt; 1000 ft (&lt; 300 m)
        &lt; 400 mi (&lt; 645 km)
    </tr>     
    <tr>
        Intermediate
        50 mi (80 km)
        1,500 ft (460 m)
        400 - 800 mi (645 - 1,290 km)
    </tr>     
    <tr>
        Advanced
        75 mi + (120 km +)
        2,000 ft + (690 m +)
        800 mi + (1,290 km +)
    </tr>
</table>

Exiting code block.

In our data, every column and every row has headers. Let's add them now.

Step3. To create our table headers, type:

<table>
    <tr>
        <th>Level</th>
        <th>Average Daily Mileage</th>
        <th>Average Daily Elevation Gain</th>
        <th>Average Overall Trip Length</th>
    </tr>    
    <tr>
        <th>Beginner</th>
        30 mi (48 km)
        &lt; 1000 ft (&lt; 300 m)
        &lt; 400 mi (&lt; 645 km)
    </tr>    
    <tr>
        <th>Intermediate</th>
        50 mi (80 km)
        1,500 ft (460 m)
        400 - 800 mi (645 - 1,290 km)
    </tr>    
    <tr>
        <th>Advanced</th>
        75 mi + (120 km +)
        2,000 ft + (690 m +)
        800 mi + (1,290 km +)
    </tr>
</table>

Exiting code block.

The last bit we're going to add to our table are the table data cells. The rest of the content is going to be table data. Let's create that now.

Step4. To create the table data cells, type:

<table>
    <tr>
        <th>Level</th>
        <th>Average Daily Mileage</th>
        <th>Average Daily Elevation Gain</th>
        <th>Average Overall Trip Length</th>
    </tr>    
    <tr>
        <th>Beginner</th>
        <td>30 mi (48 km)</td>
        <td>&lt; 1000 ft (&lt; 300 m)</td>
        <td>&lt; 400 mi (&lt; 645 km)</td>
    </tr>    
    <tr>
        <th>Intermediate</th>
        <td>50 mi (80 km)</td>
        <td>1,500 ft (460 m)</td>
        <td>400 - 800 mi (645 - 1,290 km)</td>
    </tr>    
    <tr>
        <th>Advanced</th>
        <td>75 mi + (120 km +)</td>
        <td>2,000 ft + (690 m +)</td>
        <td>800  mi + (1,290 km +)</td>
    </tr>
</table>

Exiting code block.

Let's save and view our table now.

Step5. Save and refresh index.html.

The page is refreshed and we see our simple table:

As you can see, the table still needs a little bit of work to be more readable. Specifically, we will be adding some spacing and grid lines to keep things more separate.

Styling Tables with CSS

In previous versions of HTML, a lot of table styling was embedded directly in the table's markup. When working with older code, you may see a lot of this residual markup. Attributes like cellspacing, cellpadding, etc. were placed directly into the <td> or <table> elements.

Today, CSS is the only way to change the appearance of a table using HTML5. Probably the most pressing issue we have is spacing within our table. This is handled by modifying the margin and padding properties for a particular table element.

First, let's move our table a little bit further away from the green section border.

Step1. Activate style.css in the code editor.

Step2. To add a bottom margin to the table, type.

/*
 * Table Styles
 */

table {
    margin-bottom: 10px;
}

Exiting code block.

Next, let's add some spacing within the table. We will start by adding some padding to our <td> elements.

Step3. To add some padding to our table data cells, type:

/*
 * Table Styles
 */

table {
    margin-bottom: 10px;
}

td {
    padding: 3px;
}

Exiting code block.

We want to do something similar to our table header cells too.

Step4. To add padding to our table header cells, type:

/*
 * Table Styles
 */

table {
    margin-bottom: 10px;
}

td {
    padding: 3px;
}

th {
    padding: 5px 10px;
}

Exiting code block.

Let's see this in the web browser.

Step5. Save style.css and refresh index.html.

The page is refreshed and we see our table with some more spacing:

To refine our table, we will add a background color to our table headers, borders to the table and to the bottom of the table rows, and we will align the text within the data cells to the center.

Step6. To add our borders and color, type:

/*
 * Table Styles
 */

table {
    margin-bottom: 10px;
    border: 1px solid #462;
}

td {
    padding: 3px;
    text-align: center;
}

th {
    padding: 5px 10px;
    background-color: lightgray;
}

tr {
    border-bottom: 1px solid #462;   
}

Exiting code block.

NOTE: The hexadecimal values here are shorthand that is commonly used. The code we're using today, #462, is shorthand for #446622.

Let's look at our page in a browser now.

Step7. Save style.css and refresh index.html.

The page is refreshed and we see our table in its finished state:

Our table looks great! Let's tackle the main navigation of our page next.