table Element

Module

The table element is a block-level element declared by the XHTML 1.1 Tables Module

Elements in the Tables Module are:
table | caption | col | colgroup | thead | tfoot | tbody | tr | th | td

Description

The table element is used to create a structured table of data within a document.

Simple Tables

In its simplest form, the table element contains a number of tr elements. Each tr element represents a single table row and contains a combination of th and/or td elements, each of which specifies a single table cell. If a caption is required for the table, an optional caption element may be included as the first child of the table element.

Table header cells should be represented by th elements and table data cells by td elements. If a cell is both data and a header (as is each of the cells containing Element Names - e.g. Calcium - in the example below) the td element should be used in preference to the th element, with either a scope attribute or headers attributes being used to indicate the cells for which it is a header.

<table>
  <caption>Chemical Symbols and Atomic Numbers of the Alkaline Earth Metals</caption>
  <tr><th scope="col" abbr="Name">Element Name</th>
      <th scope="col" title="Chemical Symbol">Symbol</th>
      <th scope="col">Atomic Number</th>
  </tr>
  <tr><td scope="row">Beryllium</td> <td>Be</td> <td> 4</td></tr>
  <tr><td scope="row">Magnesium</td> <td>Mg</td> <td>12</td></tr>
  <tr><td scope="row">Calcium</td>   <td>Ca</td> <td>20</td></tr>
  <tr><td scope="row">Strontium</td> <td>Sr</td> <td>38</td></tr>
  <tr><td scope="row">Barium</td>    <td>Ba</td> <td>56</td></tr>
  <tr><td scope="row">Radium</td>    <td>Ra</td> <td>88</td></tr>
</table>

The number of columns in the table is equal to the number of columns in the the row with the most columns. (What a sentence!) In the example above, it is easy to see that every row has three cells and three columns - and so the table itself has three columns. However, any cell may be made to span more than one column (by adding a colspan attribute) or more than one row (by adding a rowspan attribute). These attributes must therefore be taken into account when determining the number of columns in a given row: rowspan attributes (of greater than "1") will affect the number of columns in subsequent rows, whereas colspan attributes (of greater than "1") will affect the number of columns in that row itself (and also in subsequent rows if combined on a single cell with a rowspan of greater than "1").

Once the number of columns in the table has been calculated, any row containing fewer columns should be padded by the user agent with empty cells until it does have this number of columns. These empty cells should be added to the end of the row (i.e. at the right for left-to-right tables and at the left for right-to-left tables - see the dir attribute). In my own opinion, however, it is good practice to give each row the same number of columns within the code in the first place.

Any table cell's contents may be assigned an abbreviation (using the abbr attribute) or longer, explanatory text (using the common title attribute). The table element itself may also be given a summary attribute containing a description of the logical structure of the table for the benefit of non-sighted users employing assistive technology.

More Complex Tables

More complex tables can be split into row groups (using thead, tfoot and tbody elements) and/or column groups (using the colgroup element). The elements thead and tfoot are both optional but if you do use either in a table you must also include at least one tbody element. Any given table may not have more than one thead or tfoot element, though - see the Content Model below.

There is also the col element, which does not define a column group but merely allows easier styling of one or more columns. (The styling options available for columns is very limited, however: see the last point in the list below.)

There are a number of cases in which this grouping might be necessary or desirable for your table. For example

• in order to define a header or footer section which is to be present on every page of the paged (e.g. printed) output of a long table
• in order to use scope="colgroup" or scope="rowgroup" on a cell (unless the column group or row group comprises all of the table's columns or rows)
• in order to apply styling solely to a particular group of columns or rows without having to style all the cells or rows individually
  Bear in mind, however, that the ability to style columns is severely limited by the lack of support in some popular browsers, e.g. Firefox, for the align and valign attributes on both colgroup and col elements and also by the CSS specification, which states that the only properties allowed on columns are width, background, border and visibility (see *CSS2 Specification: Column selectors). In fact, even border and visibility are not widely and consistently supported. Some browsers may allow more styling than this on columns, but this is not standard behaviour and will not be cross-browser compatible.

<table style="width:40em" cellspacing="2" cellpadding="3" border="1">

  <caption>Chemical Symbols and Atomic Numbers of the Alkaline Earth Metals</caption>

  <colgroup span="1" width="40%" style="background:#fcc"></colgroup>
  <colgroup style="background:#ccf">
    <col width="20%" />
    <col width="40%" />
  </colgroup>

  <thead align="right">
    <tr><th rowspan="2" scope="col" abbr="Name">Element Name</th>
        <th colspan="2" scope="colgroup" align="center">Data</th>
    </tr>
    <tr>
        <th scope="col" title="Chemical Symbol">Symbol</th>
        <th scope="col">Atomic Number</th>
    </tr>
  </thead>

  <tbody align="right">
    <tr><td scope="row">Beryllium</td> <td>Be</td> <td> 4</td></tr>
    <tr><td scope="row">Magnesium</td> <td>Mg</td> <td>12</td></tr>
    <tr><td scope="row">Calcium</td>   <td>Ca</td> <td>20</td></tr>
    <tr><td scope="row">Strontium</td> <td>Sr</td> <td>38</td></tr>
    <tr><td scope="row">Barium</td>    <td>Ba</td> <td>56</td></tr>
    <tr><td scope="row">Radium</td>    <td>Ra</td> <td>88</td></tr>
  </tbody>

</table>

The example above uses the deprecated style attribute, for ease of demonstration, but ordinarily these styles should be contained within either an external stylesheet or a style element in the head of the document. However, since I am using the style attribute on this page, I have included a Content-Style-Type HTTP header of "text/css".

For any given table, every row group should contain the same number of columns. This is the number of columns in the table: it should always be equal to the value calculated from any colgroup or col elements (if present), taking account of any relevant span attributes.

Horizontal alignment of cell contents may be specified using the align attribute and vertical alignment by the valign attribute. When these attributes are applied to an individual td or th, it is the alignment of that cell alone which is affected. When applied to tr, thead, tbody or tfoot, it is the alignment of all cells contained within that element which is affected. When used on col or colgroup, it is the alignment of all cells within the relevant column(s) which should be affected - however, as mentioned above, some popular browsers (such as Firefox) do not support either of these attributes on col or colgroup.

The visual presentation of the table as a whole may be controlled by the width, border, rules, frame, cellspacing and cellpadding attributes, as well as by CSS.

You can read more about tables at the W3C's *HTML4.01 table markup page.

Note: In HTML 4, if a table contains no tbody element (such as in the first example above), one is automatically generated for it in the DOM. It is therefore recommended, if compatibility is desired between XML-based and HTML-based user agents, to include explicit tbody elements in all tables - without them, certain scripts or style sheet rules may cease to function correctly. Ref: the W3C Note (work in progress) *XHTML Media Types - Compatibility Guidelines - Item A.19

#REQUIRED Attributes

There are no #REQUIRED attributes on the table element.

Specific Attributes

From the Tables Module - the Element's own Module

border [ type Pixels ]

Table border width in pixels

cellpadding [ type Length ]

Padding within table cells

cellspacing [ type Length ]

Spacing between table cells

frame [ type Enumeration (void | above | below | hsides | lhs | rhs | vsides | box | border) ]

States which sides of the frame surrounding the table will be visible

rules [ type Enumeration (none | groups | rows | cols | all) ]

States which of the rules between the cells of a table will be visible

summary [ type Text ]

A description of the logical layout of the table, for the benefit of non-sighted users

width [ type Length ]

Table width in pixels or as a percentage of the available horizontal space (usually the parent element's width) - the table's natural width (i.e. its width in the absence of this attribute) is determined by the user agent

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality - for a table element, this also sets the ordering of the table's columns.

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

caption?, ( col* | colgroup* ), ( ( thead?, tfoot?, tbody+ ) | tr+ )

NOTE: This element cannot be empty

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of table

• From the Tables Module: caption, col, colgroup, tbody, tfoot, thead, tr

Valid parents of table

• From the Structure Module: body
• From the Text Module: blockquote, div
• From the List Module: dd, li
• From the Tables Module: td, th
• From the Forms Module: button, fieldset, form
• From the Client-side Image Map Module: map
• From the Scripting Module: noscript
• From the Edit Module: del, ins
• From the Object Module: object