<col>

  • Revision slug: HTML/Element/col
  • Revision title: col
  • Revision id: 70815
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment 1 words added

Revision Content

The HTML Col 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

{{ htmlattrdef("align") }} {{ Deprecated_inline() }}{{ 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 context 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") }}.
Note: Do not use this attribute as it has been deprecated.
  • 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") }}: as {{ HTMLElement("td") }} are not descendant of the {{ HTMLElement("col") }}, they won't inherit it.
    • If the table doesn't use any {{ htmlattrxref("colspan", "td") }} attribute, use the td:nth-child(n) CSS selector where n is the ordinal position of the column in the table.
    • If the table does some {{ htmlattrxref("colspan", "td") }} attribute, the effect can be achieved by combining adequate CSS attribute selectors like [colspan=n], though this is no more 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 known of some version of Microsoft Internet Explorer: the {{ HTMLElement("col") }} element should be styled using CSS. To give a similar effect than the bgcolor attribute, the CSS property {{ cssxref("background-color") }} should be used.
{{ htmlattrdef("char") }} {{ Deprecated_inline() }}{{ unimplemented_inline("915") }}
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.
{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }}{{ unimplemented_inline("915") }}
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute.
{{ htmlattrdef("span") }}
When present, this attribute applies the attributes of the <col> element to additional consecutive columns.
{{ htmlattrdef("valign") }} {{ Deprecated_inline() }}{{ 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. ({{ unimplemented_inline() }}: Inline attribute style vertical-align:value also is not supported.)
{{ htmlattrdef("width") }} {{ Deprecated_inline() }}
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> 

Notes

Under XHTML 1.0, <col> requires a trailing slash: <col />.

This element should appear within a {{ HTMLElement("colgroup") }}lement, and like that element, it is somewhat of a convenience feature used to set attributes with one or more table columns. In practice, few developers seem to use it.

{{ HTML:Element_Navigation() }}

{{ languages( { "pl": "pl/HTML/Element/col" } ) }}

Revision Source

<p>The HTML Col Element (<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>
<h3 name="Attributes">Attributes</h3>
<dl> <dt>{{ htmlattrdef("align") }} {{ Deprecated_inline() }}{{ 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 context 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> <div class="note"><strong>Note: </strong>Do not use this attribute as it has been deprecated. <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") }}: as {{ HTMLElement("td") }} are not descendant of the {{ HTMLElement("col") }}, they won't inherit it.</li> <li>If the table doesn't use any {{ htmlattrxref("colspan", "td") }} attribute, use the <span style="font-family: Courier New;">td:nth-child(n) </span> CSS selector where n is the ordinal position of the column in the table.</li> <li>If the table does some {{ 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 no more trivial.</li> </ul> </li> <li>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() }}.</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 known of some version 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 than the <span style="font-family: Courier New;">bgcolor</span> attribute, the <a href="/en/CSS" title="en/CSS">CSS</a> property {{ cssxref("background-color") }} should be used.</div> </dd>
</dl>
<dl> <dt>{{ htmlattrdef("char") }} {{ Deprecated_inline() }}{{ unimplemented_inline("915") }}</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.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("charoff") }} {{ Deprecated_inline() }}{{ unimplemented_inline("915") }}</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.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("span") }}</dt> <dd>When present, this attribute applies the attributes of the <span style="font-family: Courier New;">&lt;col&gt;</span> element to additional consecutive columns.</dd>
</dl>
<dl> <dt>{{ htmlattrdef("valign") }} {{ Deprecated_inline() }}{{ 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>. ({{ 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") }} {{ Deprecated_inline() }}</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><h3 name="Example">Example</h3>
<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>
<h3 name="Notes">Notes</h3>
<p>Under XHTML 1.0, <span style="font-family: Courier New;"><code>&lt;col&gt;</code></span> requires a trailing slash: <span style="font-family: Courier New;"><code>&lt;col /&gt;</code></span>.</p>
<p>This element should appear within a {{ HTMLElement("colgroup") }}lement, and like that element, it is somewhat of a convenience feature used to set attributes with one or more table columns. In practice, few developers seem to use it.</p>
<p>{{ HTML:Element_Navigation() }}</p>
<p>{{ languages( { "pl": "pl/HTML/Element/col" } ) }}</p>
Revert to this revision