Custom Search
| Syntax | This element uses separate opening and closing tags.<colgroup>...</colgroup> |
|---|---|
| Usage | The <colgroup> tag allows structural divisions to be created within a table. The <colgroup> tag allows styles or HTML attributes to be applied to one or more columns, all at the same time. If used, place the <colgroup> tag before any <thead>, <tfoot>, <tbody>, or <tr> tags within the table. Also, if a <caption> tag is used, the <colgroup> tag should occur after it. A table may contain more than one <colgroup> tag. The number of columns in a colgroup is determined either by the use of the <colgroup> tag's span attribute, or by using <col> tags between the opening and closing <colgroup> tags. HTML & XHTML <colgroup> example using the span attribute to set the number of columns. <table border="1" summary="Stock Performance"> <caption>Stock Tracker</caption> <colgroup span="2" width="300"></colgroup> <tr> <th>Stock Symbol</th> <th>Profit</th> </tr> <tr> <td>MSFT</td> <td>$723.48</td> </tr> <tr> <td>GOOG</td> <td>$1254.58</td> </tr> </table>   HTML <colgroup> example using <col> tags to set the number of columns. <table border="1" summary="Stock Performance"> <caption>Stock Tracker</caption> <colgroup> <col width="200"> <col width="300"> </colgroup> <tr> <th>Stock Symbol</th> <th>Profit</th> </tr> <tr> <td>MSFT</td> <td>$723.48</td> </tr> <tr> <td>GOOG</td> <td>$1254.58</td> </tr> </table> XHTML <colgroup> example using <col> tags to set the number of columns. <table border="1" summary="Stock Performance"> <caption>Stock Tracker</caption> <colgroup> <col width="200" /> <col width="300" /> </colgroup> <tr> <th>Stock Symbol</th> <th>Profit</th> </tr> <tr> <td>MSFT</td> <td>$723.48</td> </tr> <tr> <td>GOOG</td> <td>$1254.58</td> </tr> </table> |
| Content Model | The <colgroup> element can contain the following tags between its opening and closing tags. |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| align char charoff span valign width | id class style title | onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup | dir lang xml:lang1 | ||
| Notes: 1. XHTML only. | |||||
| Attribute | Description |
|---|---|
| align | The align attribute specifies the horizontal alignment within a cell. Possible values are "center", "char", "justify", "left", and "right". |
| char | The char attribute specifies a single character to act as an alignment character when the align attribute is set to "char". The default character for this attribute is the decimal point. Note: This attribute may have little or no browser support among popular browsers. |
| charoff | The charoff attribute specifies an offset to the first occurrence of the alignment character, which is specified by the char attribute. Note: This attribute may have little or no browser support among popular browsers. |
| span | The span attribute specifies the number of columns in the colgroup. HTML & XHTML <colgroup> example using the span attribute to set the number of columns. <table border="1" summary="Stock Performance">
<caption>Stock Tracker</caption>
<colgroup span="2" width="300"></colgroup>
<tr>
<th>Stock Symbol</th>
<th>Profit</th>
</tr>
<tr>
<td>MSFT</td>
<td>$723.48</td>
</tr>
<tr>
<td>GOOG</td>
<td>$1254.58</td>
</tr>
</table> |
| valign | The valign attribute specifies the vertical alignment within a cell. Possible values are "baseline", "bottom", "middle", and "top". |
| width | The width attribute specifies the default column width for the columns in the group. The value of the width attribute can be specified in pixels, percentage, or relative size. Example using pixels: <colgroup width="300"></colgroup> Example using percentage: <colgroup width="30%"></colgroup> Example using relative size: <colgroup width="2*"></colgroup> Example using relative size to set the width to match the column's contents: <colgroup width="0*"></colgroup> |
| id | The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| onclick | The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example |
| ondblclick | The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example |
| onkeydown | The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example |
| onkeypress | The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example |
| onkeyup | The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example |
| onmousedown | The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example |
| onmousemove | The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example |
| onmouseout | The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example |
| onmouseover | The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example |
| onmouseup | The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example |
| dir | The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example |
| lang | The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example |
| xml:lang | The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only. |
| <colgroup> example using the span attribute to set the number of columns.<colgroup> example using <col> tags to set the number of columns. |