Skip to: content, navigation

table (HTML element)

Spec
Depr. Empty Version
No No HTML 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+
Full Full Full Full

Syntax

<table summary="string">
</table>

Description

The table element is used to present data in a grid-like fashion (in rows and columns), with appropriate headers to identify the data contained in each column and row.

At its most basic, a table is built using the table, tr, and td elements (with th elements used for marking up the column or row headings), as shown in the example HTML, which renders as shown in Figure 1.

Figure 1. A simple table with no formatting A simple table with no formatting

A more complex table may also include a caption; col and colgroup elements; and the structural thead, tfoot, and tbody elements, which are used to identify the different regions in the table.

Example

Here’s a very simple two-column, two-row table:

<table>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>

Use This For …

A table should only be used for tabular data. It should not be used (or, rather, misused) as a layout mechanism, whether for the layout of an entire web page, or for specific sections of a page. CSS should be used for laying out a page, as it ensures that the content is adaptable to different devices, and doesn’t cause problems when it’s linearized.

Compatibility

Internet Explorer Firefox Safari Opera
5.5 6.0 7.0 1.0 1.5 2.0 1.3 2.0 3.0 9.2 9.5
Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

  • align
    sets the alignment or position of the table relative to surrounding content
  • bgcolor
    defines the background color for the table
  • border
    sets a border around the table
  • cellpadding
    creates padding around the contents of table cells
  • cellspacing
    creates space (in the form of margins) outside of table cells
  • frame
    renders a border on distinct edges of the table
  • rules
    creates a rule between table cells (for rows and columns)
  • summary
    provides a non-visual summary of the table’s content or purpose
  • width
    sets the table’s width in pixels or as a percentage

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#3
Contributed:
by AutisticCuckoo
Date:
Fri, 28 Mar 2008 12:58:09 GMT

It should be stated that a TFOOT element, if it is used, must appear *before* the first TBODY element.

ID:
#2
Contributed:
by AutisticCuckoo
Date:
Fri, 28 Mar 2008 12:44:58 GMT

The 'Contains' sections should say 'col OR colgroup', since you cannot have both element types as immediate children of the table at the same time. It's either/or.

ID:
#1
Contributed:
by mmj
Date:
Thu, 13 Mar 2008 00:11:03 GMT

The ordering of elements inside a table element is important for validation.

<caption>, if it exists, must go first. There can be only one.

There can be any number of <col> or <colgroup> elements, but not both. If <colgroup> elements are used they may in turn contain any number of <col> elements.

<thead> if it exists, must follow. Then <tfoot>. Only one of each are allowed and they must be in this order if they are used. If either or both of these are used, they must each contain at least one <tr> element.

There must be at least one <tr> or <tbody> and these must be last. The same table cannot contain both <tr> and <tbody> elements. If <tbody> elements are used they must each contain at least one <tr> element.

<tr> elements, where used, must each contain at least one <td> or <th> element, and these may be intermixed in any combination - any cell may be a <th> or <td>.

Note: even though <tfoot> must come before any <tbody> or <tr> elements in the code, the contents of the <tfoot> element will still be shown below the rest of the table when viewed in a browser.

Note: The specification pertaining to tables is subtly different between HTML (4.01) and XHTML. In HTML 4.01, the <tbody> elements are always required. However, both the opening and closing elements of a <tbody> element are optional in HTML, and if you don't use them a validator will read it as if there is a <tbody> element there. In practice this means there will not really be any difference in coding, although if you browse the DOM you will always find a <tbody> element if the document was HTML even if one didn't exist in the source.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search