Horizontal Alignment of Cell Contents

By default, data cells (TD) are left aligned while header cells (TH) are centered. You can override the default alignment with the ALIGN attribute on the table cell, e.g. <td align=right>. There are several attributes assoociated with horizontal alignment:

ALIGN
This can be one of: LEFT, CENTER, RIGHT, JUSTIFY and CHAR. User agents may treat Justify as left alignment if they lack support for text justification. ALIGN=CHAR is used for aligning cell contents on a particular character. The attribute value for ALIGN is case insensitive.
CHAR
This is used to specify an alignment character for use with align=char, e.g. char=":". The default character is "."
CHAROFF
This is used with align=char to specify the relative offset of the alignment character with respect to the width of the cell. The attribute value takes the form of a positive integer in the range 1 to 100 followed by a percent sign, e.g. charoff="50%".

The earlier example of aligning form fields can be more simply achieved using align on char and using the CHAR attribute to set the alignment character to a convenient character, for example:

<table>
  <tr>
  <td align=char char=":">
    name: <input name="name" size=18><br>
    card number: <input name="cardnum" size=18><br>
    expires: <input name="expires-month" size=2> /
    <input name="expires-year" size=2><br>
    telephone:<input name="phone" size=18><br>
</table>

Each line in the table is then indented so that all the colons are positioned under one another.

Vertical Alignment of Cell Contents

By default, cell contents are vertically aligned at the middle of each cell. The VALIGN attribute can be used with TH or TD to override this default. It can take one of the following values: TOP, MIDDLE or BOTTOM, e.g. <TD VALIGN=TOP>. Note that the attribute value is case insensitive.

Note: the ability to ensure several cells on the same row share the same baseline has been left out of this specification owing to difficulties in providing a adequate definition of this feature.

More advanced ways of specifying alignment

If there are lots of cells, it rapidly becomes tedious and inefficient to explicitly specify the horizontal and vertical alignment attributes on each cell. A more compact alternative is to use the HSPEC and VSPEC elements to specify alignment properties for groups of matching cells.

HSPEC and VSPEC elements specify alignment properties for table cells and act like IF-THEN rules. The IF part is a conjunction of the following optional parts:

  1. whether the cell is in thead, tbody or tfoot (rowgroup)
  2. the class attribute of the current row (rowclass)
  3. whether the cell is a header or data cell (celltype)
  4. the class attribute of the cell itself (cellclass)
  5. the cell's row and/or column number (row or col)

If the cell straddles two or more rows or columns, the number of the first row/column is used for evaluating the match.

The THEN part sets the horizontal or vertical alignment for the cell's contents. The class attribute of the hspec or tspec element matching a cell can also be used by style sheets to attach additional rending properties to groups of cells.

Conflict resolution is real simple:

  1. properties defined as attributes on cells always override hspec or vspec
  2. hspec and vspec are lexically ordered from general to specific, i.e. the last matching hspec or vspec elements sets the cell's alignment properties

Some simple examples:

        <hspec celltype=th col=1 align=center>
        <hspec celltype=td col=1 align=left>

This example sets different alignments for cells in column 1 depending on whether they are header or data cells. When several HSPEC elements match a given cell, the last one wins. Note that an explicit ALIGN attribute set on the cell itself always wins over any HSPEC elements.

        <vspec rowgroup=thead row=1-3 valign=bottom>
        <vspec rowgroup=tbody row=1-3 align=top>

This example sets different alignments for cells in rows 1 to 3 depending on whether they are in the THEAD or in the TBODY. When several VSPEC elements match a given cell, the last one wins. Note that an explicit VALIGN attribute set on the cell itself always wins over any VSPEC elements.