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

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

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.

You can also remove the border from the table element if you like, as the cell borders will join together to provide a single border look.

Here's what the document looks like now.

Here's some more detail on table borders if you're interested.

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 10 pixels, add the following to your style sheet.

Here's what the document looks like now.

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.

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.

Alternating Background Color

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.

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.

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.

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