XHTML Reference: col

The XHTML WYSIWYG Editor For Desktop & Web Applications

col

Definition

In XHTML, tables are physically constructed from rows, rather than columns. Table rows contain table cells. In visual Web browsers, when cells line up beneath each other, they are perceived as columns.

The col element provides a mechanism to apply attributes to a logical conception of a column. The col element is most commonly used to apply table cell alignment using the align and valign attributes, to apply column width using the width attribute, and CSS formatting using the class attribute.

Example

In the example below, the width of the first column is set to 200 pixels, the horizontal alignment of the second column is set to right and a single col element defines the third and forth columns with no additional attributes.

  1. <table border="1" cellpadding="1" cellspacing="2" summary="This table charts the number of cups of coffee consumed by each person, the type of coffee (decaf or regular), and whether taken with sugar.">
  2. <caption>Cups of coffee consumed by each person</caption>
  3. <colgroup align="left">
  4. <col width="200" />
  5. <col align="right" />
  6. <col span="2" />
  7. </colgroup>
  8. <tr>
  9. <th>Name</th>
  10. <th>Cups</th>
  11. <th>Type</th>
  12. <th>Sugar</th>
  13. </tr>
  14. <tr>
  15. <td>Wendy</td>
  16. <td>10</td>
  17. <td>Regular</td>
  18. <td>yes</td>
  19. </tr>
  20. <tr>
  21. <td>Jim</td>
  22. <td>15</td>
  23. <td>Decaf</td>
  24. <td>no</td>
  25. </tr>
  26. </table>

Attributes

Basic

align

Horizontal alignment in cells. Possible values are:

  • left: Left-justify text. This is the default value for table data cells.
  • center: Center-justify text. This is the default value for table header cells.
  • right: Right-justify text.
  • justify: Left- and right-justify text.
  • char: Align text around a specific character.
span
(Number) A single col element can represent (or "span") multiple columns. This attribute contains a number of columns "spanned" by the col element.
valign

Vertical alignment in cells. Possible values are:

  • top: Cell data is flush with the top of the cell.
  • middle: Cell data is centered vertically within the cell. This is the default value.
  • bottom: Cell data is flush with the bottom of the cell.
  • baseline: All cells found in the same row as a cell whose valign attribute has this value will have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row.
width
(Length) Default column width.

Advanced

char
(Character) This attribute specifies a single character within a text fragment to act as an axis for alignment. The default value for this attribute is the decimal point character for the current language as set by the xml:lang attribute. For example, the period (".") in English and the comma (",") in French.
charoff
(Length) When present, this attribute specifies the offset to the first occurrence of the alignment character on each line.

Common core attributes

class
(NameTokens) This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or set of class names. Multiple class names must be separated by white space characters. Class names are typically used to apply CSS formatting rules to an element.
id
(ID) This attribute assigns an ID to an element. This ID must be unique in a document. This ID can be used by client-side scripts (such as JavaScript) to select elements, apply CSS formatting rules, or to build relationships between elements.
title
(Text) This attribute offers advisory information. Some Web browsers will display this information as tooltips. Assistive technologies may make this information available to users as additional information about the element.

Common internationalization attributes

xml:lang
(NameToken) This attribute specifies the base language of an element's attribute values and text content.
dir

This attribute specifies the base direction of text. Possible values:

  • ltr: Left-to-right
  • rtl: Right-to-left

Common event attributes

onclick
(Script) A client-side script event that occurs when a pointing device button is clicked over an element.
ondblclick
(Script) A client-side script event that occurs when a pointing device button is double-clicked over an element.
onmousedown
(Script) A client-side script event that occurs when a pointing device button is pressed down over an element.
onmouseup
(Script) A client-side script event that occurs when a pointing device button is released over an element.
onmouseover
(Script) A client-side script event that occurs when a pointing device is moved onto an element.
onmousemove
(Script) A client-side script event that occurs when a pointing device is moved within an element.
onmouseout
(Script) A client-side script event that occurs when a pointing device is moved away from an element.
onkeypress
(Script) A client-side script event that occurs when a key is pressed down over an element then released.
onkeydown
(Script) A client-side script event that occurs when a key is pressed down over an element.
onkeyup
(Script) A client-side script event that occurs when a key is released over an element.

Common style attribute

style
(Text) This attribute specifies formatting style information for the current element. The content of this attribute is called inline CSS. The style attribute is deprecated (considered outdated), because it fuses together content and formatting.

Contains

  • Nothing

See also