11. Tables: the table element

11. Tables: the `table` element

XHTML tables allow you to arrange content in rows and columns. Before we dive into the general case, here is a small complete example table showing the state names, state capitals, and state birds of two states.

  <table>
     <tr>
       <td>New Mexico</td>
       <td>Santa Fe</td>
       <td>Greater Roadrunner</td>
     </tr>
     <tr>
       <td>Arizona</td>
       <td>Phoenix</td>
       <td>Cactus Wren</td>
     </tr>
  </table>

This table will have two rows and three columns. The table element wraps around the whole table. Each row is contained in a tr (table row) element. Within a row, each td (table detail) element contains one “cell” of the table, that is, the content at the intersection of one row and one column.

Here is the content model for tables in general.

element table
{ attribute summary { text }?,
  attribute border { xsd:int },
  attribute frame
  { "void" | "above" | "below" | "hsides" | "lhs" | "rhs" |
    "vsides" | "box" | "border"
  }?,
  attribute rules { "none" | "groups" | "rows" | "cols" | "all" }?,
  attribute cellspacing { text }?,
  attribute cellpadding { text }?,
  Common.attrib,
  element caption
  { Common.attrib,
    Inline.model
  }?,
  (col* | colgroup*),
  ((thead?, tfoot?, tbody+) | tr+)  
}

summary

Use this optional attribute if you would like to provide a textual summary of the table's contents. This is especially useful for blind readers.

border

To place a border N pixels wide around the whole table, use an attribute border="N".

frame

To place a border around some sides of the table, use an attribute with one of these values:

`void`	Don't use any borders (the default value).
`above`	Place a border only along the top of the table.
`below`	Place a border only along the bottom.
`hsides`	Place borders on the top and bottom.
`vsides`	Place borders on the left and right sides.
`lhs`	Place a border only on the left.
`rhs`	Place a border only on the right.
`border`	Place a border around all four sides.
`box`	Same as `border`.

rules

Use this attribute to specify when ruled lines are drawn between the cells of a table. Values:

`none`	Don't use ruled lines between cells (the default value).
`groups`	Place ruled lines after the table head (`thead`) if there is one, before the table footer (`tfoot`) if there is one, and between column groups specified with `colgroup`.
`rows`	Place ruled lines between rows.
`cols`	Place ruled lines between columns.
`all`	Place ruled lines between rows and between columns, forming a complete grid.

cellspacing

By default, the cells in the table are packed tightly together. You can use the table's cellspacing attribute to add extra spacing between the cells, horizontally and vertically. The value of this attribute is a length; see Section 6.1, “The length datatype”.

cellpadding

By default, the size of the contents of each cell in the table are determined by what is in the cell. The align and valign attributes determine where the contents are shifted if they do not completely fill the cell. For example, if a column is 2cm wide, the column uses align="left", and one particular cell is 1cm wide, its contents are placed against the left side of the cell, and the extra space will appear on the right.

The purpose of the cellpadding attribute of a table is to put a little extra space on all four sides of the content of a cell. The value of this attribute is a length; see Section 6.1, “The length datatype”. For example, cellpadding='4px' would make sure there is a blank space inside the perimeter of each cell, four pixels wide.

Common.attrib

You can use any of the attributes from Section 15.3, “The common attributes: Common.attrib”.

caption

To add a caption to the table, use this optional element. It allows the usual common attributes (Section 15.3, “The common attributes: Common.attrib”), and its content is any mixture of text and inline elements.

(col* | colgroup*)

To specify certain properties of the columns of your table, use either a sequence of col elements or a sequence of colgroup elements. See Section 11.1, “Specifying table column properties”.

((thead?, tfoot?, tbody+) | tr+)

In a simple table, encode the rows as a series of tr (table row) elements. See Section 11.3, “Table rows: the tr element”.

For large tables, you can structure the table as a heading section, a footer section, and one or more body sections. See Section 11.2, “Sectioning a table with thead, tbody, and tfoot”.

11.1. Specifying table column properties

There are two ways you can describe the properties of the columns in your table. You can provide a series of col elements, each of which describes one column. If there are lots of columns, and some groups of them share properties, you can instead provide a series of colgroup elements that describe each group of columns. In that case, inside each colgroup element is an optional sequence of col elements further describing the columns in that group.

Here is the content model for the colgroup element.

element colgroup
{ col.attlist,
  col*
}
col.attlist =
  align.attrib?,
  valign.attrib?,
  attribute span { text }?,
  attribute width { text }?
align.attrib =
  attribute align { "left" | "center" | "right" | "justify" }
valign.attrib =
  attribute valign { "top" | "middle" | "bottom" | "baseline" },
  Common.attrib
col = element col
{ col.attlist,
  empty
}

span: If you want to describe several adjacent columns, use an attribute span='N' where N is the number of columns. If you do this, you won't need a sequence of col elements inside the colgroup.
width: Use this attribute if you want to specify the width of the column. Its value is a length; see Section 6.1, “The length datatype”.
align: Specifies the horizontal positioning. By default, the content of each cell in the table is left-aligned (except for th elements, which are centered by default). To override these values, use align='left' to left-justify the content; use align='center' to center it; use align='right' to right-justify it; and use align='justify' to format the content as a paragraph with straight left and right margins.
valign: Specifies the vertical positioning. By default, the content of each cell is centered (valign="middle"). To set up a default vertical position for the column group or column, use valign="top" to push it to the top, valign="middle" for vertical centering, or valign="bottom" to push it down to the bottom. The valign="baseline" option lines up the text baselines of the cells in that column with the baselines of the other cells in the row.
Common.attrib: See Section 15.3, “The common attributes: Common.attrib”.
col: The col element uses the same list of attributes.

Building web pages with XHTML 1.1