HTML Tables

Tables are used to present tabular data. Here's a quick overview of the various table elements.

Tables allow you to present tabular data in a nice, structured way. Tables present data within a grid — with rows and columns.

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.

View Output

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.

View Output

The HTML5 specification actually includes a border attribute for tables, but it's not 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.

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.

View Output

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.

View Output

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.

View Output

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.

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.

View Output

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.

View Output

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

View Output

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.