mozilla

Revision 70822 of <col>

  • Revision slug: HTML/Element/col
  • Revision title: col
  • Revision id: 70822
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 170 words added, 34 words removed

Revision Content

The HTML Table Column Element (<col>) defines a column within a table and is used for grouping and alignment purposes. It is generally found within a {{ HTMLElement("colgroup") }} element.

Attributes

Like all other HTML elements, this element supports the global attributes.

{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("915") }}
This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are:
  • left, aligning the content to the left of the cell
  • center, centering the content in the cell
  • right, aligning the content to the right of the cell
  • justify, inserting spaces into the textual content so that the content is justified in the cell
  • char, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "col") }} and {{ htmlattrxref("charoff", "col") }} attributes {{ unimplemented_inline("2212") }}.

If this attribute is not set, its value is inherited from the {{ htmlattrxref("align", "colgroup") }} of the {{ HTMLElement("colgroup") }} element this <col> element belongs too. If there are none, the left value is assumed.

Note: Do not use this attribute as it is obsolete (not supported) in the latest standard.
  • To achieve the same effect as the left, center, right or justify values:
    • Do not try to set the {{ cssxref("text-align") }} property on a selector of the {{ HTMLElement("col") }}. Because {{ HTMLElement("td") }} elements are not descendant of the {{ HTMLElement("col") }} element, they won't inherit it.
    • If the table doesn't use a {{ htmlattrxref("colspan", "td") }} attribute, use the tr:nth-child(n) CSS selector where n is the ordinal position of the column in the table.
    • If the table does use a {{ htmlattrxref("colspan", "td") }} attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is not trivial.
  • To achieve the same effect as the char value, in CSS3, you can use the value of the {{ htmlattrxref("char", "col") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.
{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }} {{ unimplemented_inline() }}
This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used:
  black = "#000000"   green = "#008000"
  silver = "#C0C0C0"   lime = "#00FF00"
  gray = "#808080"   olive = "#808000"
  white = "#FFFFFF"   yellow = "#FFFF00"
  maroon = "#800000"   navy = "#000080"
  red = "#FF0000"   blue = "#0000FF"
  purple = "#800080"   teal = "#008080"
  fuchsia = "#FF00FF"   aqua = "#00FFFF"
Usage note: Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("col") }} element should be styled using CSS. To give a similar effect to the bgcolor attribute, use the CSS property {{ cssxref("background-color") }}.
{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("2212") }}
This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "col") }} is not set to char, this attribute is ignored.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "col") }}, in CSS3, you can use the value of the {{ htmlattrxref("char", "col") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.
{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("2212") }}
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
{{ htmlattrdef("span") }}
This attribute contains a positive integer indicating the number of additional consecutive columns to apply he attributes of the <col> element. If not present, its default value is 0.
Note: This attribute apply on the attribute of the column, it has no effect on the CSS styling of the column, or even of the cell of the column.
{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("915") }}
This attribute specifies the vertical alignment of the text within the cell. Possible values for this attribute are baseline, bottom, middle, and top.
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
({{ unimplemented_inline() }}: Inline attribute style vertical-align:value also is not supported.)
{{ htmlattrdef("width") }} {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}
This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as 0.5* also can be used.

Example

    <table border="1" width="400">

      <colgroup>

    <col align="center"width="150" />
    <col align="right" />
      </colgroup>

      <td>This column is aligned to the center.</td>
      <td>This one is aligned to the right.</td>
    <tr>

       <td>!</td>

       <td>?</td>
    </tr>
    <tr>

       <td>!</td>

      <td>?</td>
    </tr>

    </table> 

DOM interface

This element implements the HTMLTableColElement interface.

See also

  • Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("theader") }}, {{ HTMLElement("tr") }};
  • CSS properties and pseudo-classes that may be specially useful to style the <col> element: 
    • the {{ cssxref("width") }} property to control the width of the column;
    • the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;
    • the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.

Revision Source

<p>The <em>HTML Table Column Element</em> (<span style="font-family: Courier New;">&lt;col&gt;</span>) defines a column within a table and is used for grouping and alignment purposes. It is generally found within a {{ HTMLElement("colgroup") }} element.</p>
<h2>Attributes</h2>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>
<dl> <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("915") }}</dt> <dd>This enumerated attribute specifies how horizontal alignment of each column cell content will be handled. Possible values are: <ul> <li><span style="font-family: Courier New;">left</span>, aligning the content to the left of the cell</li> <li><span style="font-family: Courier New;">center</span>, centering the content in the cell</li> <li><span style="font-family: Courier New;">right</span>, aligning the content to the right of the cell</li> <li><span style="font-family: Courier New;">justify</span>, inserting spaces into the textual content so that the content is justified in the cell</li> <li><span style="font-family: Courier New;">char</span>, aligning the textual content on a special character with a minimal offset, defined by the {{ htmlattrxref("char", "col") }} and {{ htmlattrxref("charoff", "col") }} attributes {{ unimplemented_inline("2212") }}.</li> </ul> <p>If this attribute is not set, its value is inherited from the {{ htmlattrxref("align", "colgroup") }} of the {{ HTMLElement("colgroup") }} element this <span style="font-family: Courier New;">&lt;col&gt;</span> element belongs too. If there are none, the <span style="font-family: Courier New;">left</span> value is assumed.</p> <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. <ul> <li>To achieve the same effect as the <span style="font-family: Courier New;">left</span>, <span style="font-family: Courier New;">center</span>, <span style="font-family: Courier New;">right</span> or <span style="font-family: Courier New;">justify</span> values:<br> <ul> <li>Do not try to set the {{ cssxref("text-align") }} property on a selector of the {{ HTMLElement("col") }}. Because {{ HTMLElement("td") }} elements are not descendant of the {{ HTMLElement("col") }} element, they won't inherit it.</li> <li>If the table doesn't use a {{ htmlattrxref("colspan", "td") }} attribute, use the <span style="font-family: Courier New;">tr:nth-child(n) </span> CSS selector where n is the ordinal position of the column in the table.</li> <li>If the table does use a {{ htmlattrxref("colspan", "td") }} attribute, the effect can be achieved by combining adequate CSS attribute selectors like <span style="font-family: Courier New;">[colspan=n]</span>, though this is not trivial.</li> </ul> </li> <li>To achieve the same effect as the <span style="font-family: Courier New;">char</span> value, in CSS3, you can use the value of the {{ htmlattrxref("char", "col") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</li> </ul> </div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("bgcolor") }} {{ Non-standard_inline() }} {{ unimplemented_inline() }}</dt> <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a class=" external" href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: <table align="center" border="0" cellpadding="0" cellspacing="10" summary="Table of color names and their sRGB values" width="80%"> <tbody> <tr> <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">black</span> = "#000000"</td> <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">green</span> = "#008000"</td> </tr> <tr> <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">silver</span> = "#C0C0C0"</td> <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">lime</span> = "#00FF00"</td> </tr> <tr> <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">gray</span> = "#808080"</td> <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">olive</span> = "#808000"</td> </tr> <tr> <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">white</span> = "#FFFFFF"</td> <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">yellow</span> = "#FFFF00"</td> </tr> <tr> <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">maroon</span> = "#800000"</td> <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">navy</span> = "#000080"</td> </tr> <tr> <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">red</span> = "#FF0000"</td> <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">blue</span> = "#0000FF"</td> </tr> <tr> <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">purple</span> = "#800080"</td> <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">teal</span> = "#008080"</td> </tr> <tr> <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">fuchsia</span> = "#FF00FF"</td> <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> <td><span style="font-family: Courier New;">aqua</span> = "#00FFFF"</td> </tr> </tbody> </table> <div class="note"><strong>Usage note: </strong>Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{ HTMLElement("col") }} element should be styled using <a href="/en/CSS" title="en/CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }}.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("2212") }}</dt> <dd>This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{ htmlattrxref("align", "col") }} is not set to <span style="font-family: Courier New;">char</span>, this attribute is ignored. <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{ htmlattrxref("char", "col") }}, in CSS3, you can use the value of the {{ htmlattrxref("char", "col") }} as the value of the {{ cssxref("text-align") }} property {{ unimplemented_inline() }}.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("2212") }}</dt> <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("span") }}</dt> <dd>This attribute contains a positive integer indicating the number of additional consecutive columns to apply he attributes of the <span style="font-family: Courier New;">&lt;col&gt;</span> element. If not present, its default value is <span style="font-family: Courier New;">0</span>.<br> <div class="note"><strong>Note: </strong>This attribute apply on the attribute of the column, it has no effect on the CSS styling of the column, or even of the cell of the column.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }} in {{ HTMLVersionInline("4") }}, {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}{{ unimplemented_inline("915") }}</dt> <dd>This attribute specifies the vertical alignment of the text within the cell. Possible values for this attribute are <span style="font-family: Courier New;">baseline</span>, <span style="font-family: Courier New;">bottom</span>, <span style="font-family: Courier New;">middle</span>, and <span style="font-family: Courier New;">top</span>. <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> ({{ unimplemented_inline() }}: Inline attribute style <a href="/en/CSS/vertical-align" title="en/CSS/vertical-align">vertical-align</a>:<em><span style='"vertical-align:&lt;span'>value </span></em>also <strong>is not</strong> supported.)</dd>
</dl>
<dl> <dt>{{ htmlattrdef("width") }} {{ obsolete_inline() }} in {{ HTMLVersionInline("5") }}</dt> <dd>This attribute specifies a default width for each column in the current column group. In addition to the standard pixel and percentage values, this attribute might take the special form <span style="font-family: Courier New;">0*</span>, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents. Relative widths such as <span style="font-family: Courier New;">0.5*</span> also can be used.</dd>
</dl>
<h2>Example</h2>
<pre>    &lt;table border="1" width="400"&gt;

      &lt;colgroup&gt;

    &lt;col align="center"width="150" /&gt;
    &lt;col align="right" /&gt;
      &lt;/colgroup&gt;

      &lt;td&gt;This column is aligned to the center.&lt;/td&gt;
      &lt;td&gt;This one is aligned to the right.&lt;/td&gt;
    &lt;tr&gt;

       &lt;td&gt;!&lt;/td&gt;

       &lt;td&gt;?&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;

       &lt;td&gt;!&lt;/td&gt;

      &lt;td&gt;?&lt;/td&gt;
    &lt;/tr&gt;

    &lt;/table&gt; 
</pre>
<h2>DOM interface</h2>
<p>This element implements the <code><a href="/en/DOM/HTMLTableColElement" title="en/DOM/HTMLTableColElement">HTMLTableColElement</a></code> interface.</p>
<h2>See also</h2>
<ul> <li>Other table-related HTML Elements: {{ HTMLElement("caption") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("theader") }}, {{ HTMLElement("tr") }};</li> <li>CSS properties and pseudo-classes that may be specially useful to style the <span style="font-family: Courier New;">&lt;col&gt;</span> element:  <ul> <li>the {{ cssxref("width") }} property to control the width of the column;</li> <li>the {{ cssxref(":nth-child") }} pseudo-class to set the alignment on the cells of the column;</li> <li>the {{ cssxref("text-align") }} property to align all cells content on the same character, like '.'.</li> </ul> </li>
</ul>
Revert to this revision