HTML Table Tutorial

This HTML table tutorial demonstrates how to create tables in HTML, style them with CSS, add alternating background colors, and more.

This tutorial assumes a basic knowledge of HTML. If you're not familiar with HTML try the HTML Tutorial.

Basic Table Elements

In HTML, you create tables using the <table> element, in conjunction with the <tr> and <td> elements.

Each set of <tr> tags (opening and closing tags) represents a row within the table that they're nested in. And each set of <td> tags represents a table data cell within the row that they're nested in.

You can also add table headers using the <th> element.

<table>
    <tr>
        <th>Table Header</th>
        <th>Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Try it with the Online Editor

Table Border

You can use CSS to add a border to the whole table or to individual table cells (or to both). Adding it to just the table will result in a border around the outside of the table, but not around each of the cells. So you won't get that grid-like effect.

In most cases, you will likely want to add borders to all of those elements.

You can use inline styles, but that will require you to add the CSS code to every single <td> element.

Instead, it's usually more efficient to define the border in an embedded or external style sheet. That way, you can apply the border to all table cells within a single declaration.

To do this, just place the border styles inside a <style> element.

Like this:

<style>
    table, th, td {
        border: 1px solid orange;
    }
</style>

So after adding those styles, your document might look something like this.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Try it with the Online Editor

The HTML5 specification actually includes a border attribute for tables, but it's normally considered sufficient for most design purposes. You can use either border="0" for no border, or border="1" for a border. However, there are no mechanisms within HTML for styling the border.

Therefore, most developers use CSS to add borders to tables. They often don't bother with the border attribute.

Also, the border attribute is only supported by the W3C version of HTML (but not the WHATWG version).

Collapsing the Border

By default, adjacent cells will have their own distinct border. This will result in a kind of "double border" look.

You can keep this if you wish. However, most developers prefer to collapse the borders into one, solid border.

To collapse the border, add the following to your style sheet.

border-collapse: collapse;

Here's what the document looks like now.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Try it with the Online Editor

Cell Padding

You can use the CSS padding property to apply padding to the cells. You can specify how much padding you want.

For example, to apply padding of 5 pixels, add the following to your style sheet.

padding: 5px;

Here's what the document looks like now.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Try it with the Online Editor

Table Width

Widths can be specified using the CSS width property, in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.

Here's an example of using percentages.

table {
    width: 100%;
    }

Note that we use only the table selector in this case, because we're only setting the width of the table — not the individual cells.

Here's what the document looks like now.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table {
                width: 100%;
            }
            table, th, td {
                border: 1px solid orange;
                border-collapse: collapse;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Try it with the Online Editor

Alternating Background Color

As I explained previously, background color can be added to HTML elements using the CSS background-color property.

You can apply a background color to the whole table, or just parts of it, like say, the table cells, or certain rows, etc.

Now let's use a little CSS trick to apply alternating colors to the rows of our table. So, the first row will be color A, the second will be color B, the third will be color A, the fourth will be color B, and so on.

To do this, use the CSS :nth-child pseudo-class selector along with the odd and even value to determine the background color of odd and even rows.

table.alt tr:nth-child(even) {
    background-color: #eee;
}
table.alt tr:nth-child(odd) {
    background-color: #fff;
}

Note that in this example, I also create a class called alt and apply it to the table, then use that class as part of my selector in the style sheet. So if there's more than one table in the document, only tables with that class will have these styles applied to them.

Here's what the document looks like with these styles.

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
        <style>
            table {
                width: 100%;
            }
            table, th, td {
                border-collapse: collapse;
                padding: 5px;
            }
            table.alt tr:nth-child(even) {
                background-color: #eee;
            }
            table.alt tr:nth-child(odd) {
                background-color: #fff;
            }            
        </style>
    </head>
    <body>
        <table class="alt">
            <tr>
                <th>Table Header</th>
                <th>Table Header</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
    </body>
</html>

Try it with the Online Editor

Colspan

You can use the colspan attribute to make a cell span multiple columns.

To use it, just provide the number of columns that the cell should span.

So here's an example of a table header that spans two columns.

<table style="width:100%">
    <tr style="background-color:beige;">
        <th colspan="2">Table Header</th>
        <th>Table Header</th>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Try it with the Online Editor

When you do this, you'll need to remove the unnecessary cells. So in the above example, there are only two table headers are defined in the table even though there are three columns.

Rowspan

Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).

<table style="width:100%">
    <tr style="background-color:beige;">
        <th rowspan="4">Table Header</th>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
    <tr style="background-color:beige;">
        <td>Table cell</td>
        <td>Table cell</td>
    </tr>
</table>

Try it with the Online Editor

In the early days of the web, web designers often used tables for layout purposes. For example, the left column was a big table cell, the main content area was another cell, etc. This was because of the grid structure that tables offer.

However, this technique is not recommended. CSS (and browser support) is now at the stage where advanced layouts can be achieved using HTML in conjunction with CSS.

HTML should be used to provide the document structure and meaning. CSS should be used for its presentation.

Table Elements

Here's a list of the table elements available in HTML5.

<table>
Represents the table.
<tr>
Represents a table row within a table.
<td>
Represents a cell (or table data) within the table.
<th>
Represents a table header cell.
tbody
Represents a block of rows that consist of a body of data for its parent table.
thead
Represents the block of rows that consist of the column labels (headers) for its parent table.
tfoot
Represents the block of rows that consist of the column summaries (footers) for the parent table.
caption
Represents the title of its parent table.
colgroup
Represents a group of one or more columns in its parent table.
col
Used for specifying column properties for each column within a colgroup.

More Info

If you'd like to learn more:

  • Also see the full list of HTML tags
  • If you're working with really large tables and want them to load faster, check out the CSS table-layout property.
  • To learn more CSS properties that you can apply to your HTML tables, see the complete list of CSS properties.