HTML tutorial

Tables

Tables in HTML should be used when you need to display tabular data. They are a block level element, and should not be put inside paragraphs. They can be put directly inside the BODY, DIV, LI or DD elements. (They can also be put inside other tables, but I advise against doing that.)

Unlike other block elements, tables do not take up the full width that is available to them (unless you specify a width). Instead, they shrink to fit their contents. As well as shrinking to fit, they can also grow to fit. If you specify a width for the table (using CSS), and the contents force it to be wider, the table will grow to fit the needs of its contents.

Tables are often abused in Web pages to define the structure. Note that this practice is outdated, and can cause problems since it removes the semantic meaning of the tables. If you are thinking of using tables to lay out your page, then you are not using them correctly. Use CSS for layout, in addition, it is easier to setup and change.

Tables offer a large amount of control over their aspects, such as the heights and widths of rows and columns, whether borders should be shown, and what the paddings of each cell should be. I will not cover that here, since that relates to display, and should be done from CSS. There is only one display-related attribute I will cover, and that is because IE 7- does not support the CSS that replicates that attribute's behaviour.

For most tables, the following CSS will produce a normal bordered effect, commonly used when displaying data in tables:

table {
  border: 1px outset gray;
}
td, th {
  border: 1px inset gray;
  padding: 2px;
}

It should also be possible to remove the gaps between the cells using the border-spacing:0px; style on the TABLE element, but Internet Explorer 7- will not understand that, and requires you to use the cellspacing="0" attribute on the table element. Alternatively, you can use the border-collapse:collapse; style. Note that most browsers will also apply the following rules by default:

th {
  font-weight: bold;
  text-align: center;
}
th, td { vertical-align: middle; }

Empty table cells are not displayed by default in most browsers (so their borders are hidden). To change that, set the empty-cells:show; style on the TH and TD elements.

A simple data table

Tables are defined a row at a time, using the TR element. Each of these can contain any number of TH (heading) and TD (data) cells. For a table to display correctly, you should have the same number of cells in each row.

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

That will produce a table like this:

Heading 1	Heading 2
Data 1	Data 2

Using a caption

You can optionally include a caption for your table. If you choose to use this, it must be the first element inside the table. By default, most browsers will display the caption above the table:

<table>
  <caption>Table n. Sample</caption>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

That will produce a table like this:

Table n. Sample
Heading 1	Heading 2
Data 1	Data 2

Spanning rows and columns

Cells are permitted to span multiple rows or columns. Typically, this is most useful for headings, but it can be applied to either TH or TD cells. The ROWSPAN and COLSPAN allow a cell to span as many rows or columns as you need. Just make sure that you do not span more rows and columns than are actually available, and make sure that at no point do a rowspan and colspan overlap - this is an error, and browser error handling is not very good at solving that particular problem:

<table>
  <caption>Table n. Sample</caption>
  <tr>
    <th rowspan="2">Heading 1</th>
    <th colspan="2">Heading 2</th>
  </tr>
  <tr>
    <th>Heading 2.1</th>
    <th>Heading 2.2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

That will produce a table like this:

Table n. Sample
Heading 1	Heading 2
Heading 1	Heading 2.1	Heading 2.2
Data 1	Data 2	Data 3

Adding a table head, body, and foot

With more complex tables, it may be necessary to have more than one dimension of headers. In this case, you can use a THEAD element to signify the headers at the top of the table, a TBODY for the normal data, which can also have its own headers, and a TFOOT for a footer. In theory a browser can also detatch the head and foot to keep them usefully positioned when scrolling or printing, but in practice, no browser does this. In theory, you can have multiple TBODY elements, but these are rarely used. If you use a THEAD or TFOOT, these must be written before the TBODY, even though the TFOOT will actually be displayed after it:

<table>
  <caption>Table n. Sample</caption>
  <thead>
    <tr>
      <th>Test</th>
      <th>Result 1</th>
      <th>Result 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
      <td>5</td>
      <td>5.5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Type 1</th>
      <td>3</td>
      <td>7</td>
    </tr>
    <tr>
      <th>Type 2</th>
      <td>6</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

That will produce a table like this:

Table n. Sample
Test	Result 1	Result 2
	5	5.5
Type 1	3	7
Type 2	6	5

More table features

Tables have a vast array of extra features that can help you make sense out of complicated data tables. I will not cover these here, and instead, I will point you to my article about making accessible tables, where I cover the extra features in detail.

Last modified: 19 April 2009

HTML tutorial - Tables

Navigation

Site search

Site navigation

Printing

Other tutorials

Tables

A simple data table

Using a caption

Spanning rows and columns

Adding a table head, body, and foot

More table features