Overview

A table is a way to organize information into rows and columns. Think “Google Spreadsheet”. A table can be a useful tool for displaying various kinds of information on a web page. Examples include; schedules, rosters, bank transactions, user data, and much more. In this lesson you will learn how to create a table using the HTML <table> tags.

<table> Tags

<table>
    <tr>
        <th>Company</th>
        <th>Website</th>
        <th>Email</th>
    </tr>

    <tr>
        <td>Wombaco</td>
        <td>https://wombaco.com</td>
        <td>support@wombaco.com</td>
    </tr>
</table>

The table tags create the container for the table content. This content is laid out row by row, using <tr> tags. Cells are added to each row using either <th> tags or <td> tags. The code above shows a table with two rows. The table headers are displayed in bold and the table data is displayed with normal font, as seen below.

Company	Website	Email
Wombaco	https://wombaco.com	support@wombaco.com

Row Headers

You can create column headers as in the example above, but you can also create row headers as well. The example below includes both.

	Mon	Tue	Wed
Hours Worked	8	6	4
Money Earned	$160	$120	$80

Notice the first <th> in the first row is empty. It is a necessary placeholder to get “Mon” to display in the second column.

<table>
    <tr>
        <th></th>  //placeholder cell
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
    </tr>

    <tr>
        <th>Hours Worked</td>
        <td>8</td>
        <td>6</td>
        <td>4</td>
    </tr>

    <tr>
        <th>Money Earned</th>
        <td>$160</td>
        <td>$120</td>
        <td>$80</td>
    </tr>
</table>

Spanning Columns and Rows

In some cases a cell will need to span multiple columns or rows. For example, a class schedule may have a two hour block for a class on Tuesday. In order to span multiple columns add the colspan attribute to a <th> or <td> with a numerical value representing the number of columns to span. To span multiple rows, use the rowspan attribute. You can see both colspan and rowspan in the example below.

<table>
    <tr>
        <th></th>
        <th>Mon</th>
        <th>Tue</th>
    </tr>
    <tr>
        <th>10am - 11am</th>
        <td rowspan="2">Algebra</td>
        <td>Physics</td>
    </tr>
    <tr>
        <th>11am - 12pm</th>
        //No td here since he one above spans into this cell
        <td>PE</td>
    </tr>
    <tr>
        <th>12pm - 1pm</th>
        <td colspan="2">Lunch</td>
        //No td here since he one above spans into this cell
    </tr>
</table>

Did you notice the comments in the code above? When you span a column or a row, you will not need to provide an element for each cell the spanning element takes up. Take a look at the resulting table below. “Algebra” spans two rows and “Lunch” is spanning two columns.

	Mon	Tue
10am – 11am	Algebra	Physics
11am – 12pm		PE
12pm – 1pm	Lunch

Table Organization

You can build some really robust tables with just the four tags we saw above, but we may be able to improve by adding some tags to organize content. For this purpose we have the <thead>, <tbody>, and <tfoot> tags available.

The <thead> tags are used to organize header content, <tbody> tags wrap the rows that make up the main content of the table, and the <tfoot> tags wrap the table footer. These tags can make it easier to provide specific styles to each section of the table. For example, with long tables, you could allow for scrolling of the body, while the table header and footer remain in place.

<table>
    <thead>
        <tr>
            <th></th>  //placeholder cell
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th>Week 1</td>
            <td>8</td>
            <td>6</td>
            <td>4</td>
        </tr>

        <tr>
            <th>Week 2</td>
            <td>5</td>
            <td>4</td>
            <td>6</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th>Money Earned</th>
            <td>$260</td>
            <td>$200</td>
            <td>$200</td>
        </tr>
    </tfoot>
</table>

In the example below, a background color has been applied to just the <thead> element.

	Mon	Tue	Wed
Hours Worked – Week 1	8	6	4
Hours Worked – Week 2	5	4	6
Money Earned	$260	$200	$200