HTML Learning:
The HTML Elements reference.
"colgroup" - html element
- COLGROUP groups a set of 'col' elements.
- It allows you to group several semantically related columns together.
- Starttag <colgroup> is Required and endtag </colgroup> is Optional
- Browsers that support the colgroup - element :
Element "colgroup" example:
<html>
<head>
<title>thead, tbody and tfoot element example</title>
</head>
<body>
<table border="8" cellspacing="5"
cellpadding="5" align="center">
<colgroup >
<col span="1" align="center" width="35" >
<col span="1" align="left" width="105" >
<col span="2" align="right" width="80" >
</colgroup>
<thead style="color:blue" >
<tr><td>Amount</td><td>Description</td>
<td>Unit Price</td><td>Price</td></tr>
</thead>
<tbody>
<tr><td >2</td><td>Bread.</td>
<td>4.0</td><td>8.00</td></tr>
<tr><td >6</td><td>Beer.</td>
<td>1.5</td><td>9.00</td></tr>
<tr><td >1</td><td>Butter.</td>
<td>3.0</td><td>3.00</td></tr>
</tbody>
<tfoot style="color:red" >
<tr><td></td><td>Summary:</td>
<td ></td><td >20.00</td></tr>
</tfoot>
</table>
</body>
</html>
Attributes:
align (deprecated), char , charoff , class , dir , id , lang , span (Initial: 1), style , title , valign , width (deprecated)
Attribute "align" value(s): depend on which element left, center, right, justify or char
Attribute "char" value(s): character
Attribute "charoff" value(s): length
Attribute "class" value(s): A list of style class names that must be separated by white space characters.
Attribute "dir" value(s): ltr or rtl
Attribute "id" value(s): unique name
Attribute "lang" value(s): language-code
Attribute "span" value(s): number
Attribute "style" value(s): style
Attribute "title" value(s): text
Attribute "valign" value(s): top, middle, bottom or baseline
Attribute "width" value(s): multi length
align (deprecated), char , charoff , class , dir , id , lang , span (Initial: 1), style , title , valign , width (deprecated)
Attribute "align" value(s): depend on which element left, center, right, justify or char
- Specifies the horizontal alignment of its element with respect to the surrounding context. Specifies the alignment of data and the justification of text in a cell.
- You should use styles (CSS) instead.
Attribute value | description |
---|---|
left | Left-flush data/Left-justify text. This is the default value for table data. |
center | Center data/Center-justify text. This is the default value for table headers. |
right | Right-flush data/Right-justify text. |
justify | Double-justify text. |
char | Align text around a specific character. If a user agent doesn't support character alignment, behavior in the presence of this value is unspecified. |
Attribute "char" value(s): character
- 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 lang attribute.
Attribute "charoff" value(s): length
- Specifies the offset to the first occurrence of the alignment character on each line.
- If a line doesn't include the alignment character, it should be horizontally shifted to end at the alignment position.
Attribute "class" value(s): A list of style class names that must be separated by white space characters.
- This attribute assigns a style class name or set of style class names to an element. Any number of elements may be assigned the same class name or names.
- You will find more about this in the CSS learning on this site.
Attribute "dir" value(s): ltr or rtl
- Specifies the base direction of directionally neutral text in an element's content and attribute values. It also specifies the directionality of tables.
Attribute value | description |
---|---|
ltr | Left-to-right text or table. |
rtl | Right-to-left text or table. |
Attribute "id" value(s): unique name
- This attribute assigns an identification name to an element. This name must be unique in a document
- Id is often used when one wants to search for an item using javascript or vbscript.
Attribute "lang" value(s): language-code
- Specifies the base language of an element's attribute values and text content.
Lang code | Name of Language |
---|---|
aa | Afar |
ab | Abkhazian |
af | Afrikaans |
ak | Akan |
sq | Albanian |
am | Amharic |
ar | Arabic |
an | Aragonese |
hy | Armenian |
as | Assamese |
av | Avaric |
ae | Avestan |
ay | Aymara |
az | Azerbaijani |
ba | Bashkir |
bm | Bambara |
be | Belarusian |
bn | Bengali |
bh | Bihari languages |
bi | Bislama |
bo | Tibetan |
bs | Bosnian |
br | Breton |
bg | Bulgarian |
my | Burmese |
ca | Catalan; Valencian |
cs | Czech |
ch | Chamorro |
ce | Chechen |
zh | Chinese |
cu | Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic |
cv | Chuvash |
kw | Cornish |
co | Corsican |
cr | Cree |
cy | Welsh |
cs | Czech |
da | Danish |
de | German |
dv | Divehi; Dhivehi; Maldivian |
nl | Dutch; Flemish |
dz | Dzongkha |
el | Greek, Modern (1453-) |
en | English |
eo | Esperanto |
et | Estonian |
eu | Basque |
ee | Ewe |
fo | Faroese |
fa | Persian |
fj | Fijian |
fi | Finnish |
fr | French |
fr | French |
fy | Western Frisian |
ff | Fulah |
ka | Georgian |
de | German |
gd | Gaelic; Scottish Gaelic |
ga | Irish |
gl | Galician |
gv | Manx |
el | Greek, Modern (1453-) |
gn | Guarani |
gu | Gujarati |
ht | Haitian; Haitian Creole |
ha | Hausa |
he | Hebrew |
hz | Herero |
hi | Hindi |
ho | Hiri Motu |
hr | Croatian |
hu | Hungarian |
hy | Armenian |
ig | Igbo |
is | Icelandic |
io | Ido |
ii | Sichuan Yi; Nuosu |
iu | Inuktitut |
ie | Interlingue; Occidental |
ia | Interlingua (International Auxiliary Language Association) |
id | Indonesian |
ik | Inupiaq |
is | Icelandic |
it | Italian |
jv | Javanese |
ja | Japanese |
kl | Kalaallisut; Greenlandic |
kn | Kannada |
ks | Kashmiri |
ka | Georgian |
kr | Kanuri |
kk | Kazakh |
km | Central Khmer |
ki | Kikuyu; Gikuyu |
rw | Kinyarwanda |
ky | Kirghiz; Kyrgyz |
kv | Komi |
kg | Kongo |
ko | Korean |
kj | Kuanyama; Kwanyama |
ku | Kurdish |
lo | Lao |
la | Latin |
lv | Latvian |
li | Limburgan; Limburger; Limburgish |
ln | Lingala |
lt | Lithuanian |
lb | Luxembourgish; Letzeburgesch |
lu | Luba-Katanga |
lg | Ganda |
mk | Macedonian |
mh | Marshallese |
ml | Malayalam |
mi | Maori |
mr | Marathi |
ms | Malay |
mk | Macedonian |
mg | Malagasy |
mt | Maltese |
mn | Mongolian |
mi | Maori |
ms | Malay |
my | Burmese |
na | Nauru |
nv | Navajo; Navaho |
nr | Ndebele, South; South Ndebele |
nd | Ndebele, North; North Ndebele |
ng | Ndonga |
ne | Nepali |
nl | Dutch; Flemish |
nn | Norwegian Nynorsk; Nynorsk, Norwegian |
nb | Bokmål, Norwegian; Norwegian Bokmål |
no | Norwegian |
ny | Chichewa; Chewa; Nyanja |
oc | Occitan (post 1500) |
oj | Ojibwa |
or | Oriya |
om | Oromo |
os | Ossetian; Ossetic |
pa | Panjabi; Punjabi |
fa | Persian |
pi | Pali |
pl | Polish |
pt | Portuguese |
ps | Pushto; Pashto |
qu | Quechua |
rm | Romansh |
ro | Romanian; Moldavian; Moldovan |
ro | Romanian; Moldavian; Moldovan |
rn | Rundi |
ru | Russian |
sg | Sango |
sa | Sanskrit |
si | Sinhala; Sinhalese |
sk | Slovak |
sk | Slovak |
sl | Slovenian |
se | Northern Sami |
sm | Samoan |
sn | Shona |
sd | Sindhi |
so | Somali |
st | Sotho, Southern |
es | Spanish; Castilian |
sq | Albanian |
sc | Sardinian |
sr | Serbian |
ss | Swati |
su | Sundanese |
sw | Swahili |
sv | Swedish |
ty | Tahitian |
ta | Tamil |
tt | Tatar |
te | Telugu |
tg | Tajik |
tl | Tagalog |
th | Thai |
bo | Tibetan |
ti | Tigrinya |
to | Tonga (Tonga Islands) |
tn | Tswana |
ts | Tsonga |
tk | Turkmen |
tr | Turkish |
tw | Twi |
ug | Uighur; Uyghur |
uk | Ukrainian |
ur | Urdu |
uz | Uzbek |
ve | Venda |
vi | Vietnamese |
vo | Volapük |
cy | Welsh |
wa | Walloon |
wo | Wolof |
xh | Xhosa |
yi | Yiddish |
yo | Yoruba |
za | Zhuang; Chuang |
zh | Chinese |
zu | Zulu |
Attribute "span" value(s): number
- Specifies the number of columns "spanned" by the COL element or the COLGROUP element In the absence of a span attribute, each COLGROUP defines a column group containing one column.
- This attribute must be an integer > 0. (Default value is 1 ) If the span attribute is set to N > 0, the current COLGROUP element defines a column group containing N columns.
Attribute "style" value(s): style
- Specifies style sheet (CSS) information for the current element.The syntax of the value of the style attribute is determined by the default style sheet language.
- You will find more about this in the CSS learning on this site.
Attribute "title" value(s): text
- This attribute offers advisory information about the element for which it is set.
Attribute "title" example:
<html>
<head>
<title>title attribute</title>
</head>
<body >
<h1 title="Heading 1">This is a Heading 1</h1>
<h2 title="Heading 2">This is a Heading 2</h2>
<h3 title="Heading 3">This is a Heading 3</h3>
<h4 title="Heading 4">This is a Heading 4</h4>
<h5 title="Heading 5">This is a Heading 5</h5>
<h6 title="Heading 6">This is a Heading 6</h6>
</body>
</html>
Attribute "valign" value(s): top, middle, bottom or baseline
- Specifies the vertical position of data within a cell.
Attribute value | description |
---|---|
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 in the same row as a cell whose valign attribute has this value should have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells. |
Attribute "width" value(s): multi length
- This attribute specifies the width of the rule. The default width is 100%, i.e., the rule extends across the entire canvas. specifies a default width for each column in the current column group. In addition to the standard pixel, percentage, and relative values, this attribute allows the special form "0*" (zero asterisk) which means that the width of the each column in the group should be the minimum width necessary to hold the column's contents.
- You should use styles (CSS) instead. (except for the object and iframe element) This attribute is overridden for any column in the column group whose width is specified via a COL element.
Events:
onclick , ondblclick , onkeydown , onkeypress , onkeyup , onmousedown , onmousemove , onmouseout , onmouseover , onmouseup
Event "onclick" value(s): One or more script statements each ended with a semicolon.
Event "ondblclick" value(s): One or more script statements each ended with a semicolon.
Event "onkeydown" value(s): One or more script statements each ended with a semicolon.
Event "onkeypress" value(s): One or more script statements each ended with a semicolon.
Event "onkeyup" value(s): One or more script statements each ended with a semicolon.
Event "onmousedown" value(s): One or more script statements each ended with a semicolon.
Event "onmousemove" value(s): One or more script statements each ended with a semicolon.
Event "onmouseout" value(s): One or more script statements each ended with a semicolon.
Event "onmouseover" value(s): One or more script statements each ended with a semicolon.
Event "onmouseup" value(s): One or more script statements each ended with a semicolon.
onclick , ondblclick , onkeydown , onkeypress , onkeyup , onmousedown , onmousemove , onmouseout , onmouseover , onmouseup
Event "onclick" value(s): One or more script statements each ended with a semicolon.
- The onclick event occurs when the pointing device button is clicked over an element.
Attribute "onclick" example:
<html>
<head>
<title>onclick Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onclick="alert('you click on th body text')" >
The onclick event occurs when the pointing device
button is clicked over an element.
</body>
</html>
Event "ondblclick" value(s): One or more script statements each ended with a semicolon.
- The ondblclick event occurs when the pointing device button is double clicked over an element.
Attribute "ondblclick" example:
<html>
<head>
<title>ondblclick Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
ondblclick="alert('you double-click on th body text')" >
The ondblclick event occurs when the pointing
device button is double clicked over an element.
</body>
</html>
Event "onkeydown" value(s): One or more script statements each ended with a semicolon.
- The onkeydown event occurs when a key is pressed down over an element.
Attribute "onkeydown" example:
<html>
<head>
<title>onkeydown Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeydown="alert('you have pressed a key down')" >
The onkeydown event occurs when a
key is pressed down over an element.
</body>
</html>
Event "onkeypress" value(s): One or more script statements each ended with a semicolon.
- The onkeypress event occurs when a key is pressed and released over an element.
Attribute "onkeypress" example:
<html>
<head>
<title>onkeypress Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeypress="alert('you have pressed and released a key')" >
The onkeypress event occurs when a key is
pressed and released over an element.
</body>
</html>
Event "onkeyup" value(s): One or more script statements each ended with a semicolon.
- The onkeyup event occurs when a key is released over an element.
Attribute "onkeyup" example:
<html>
<head>
<title>onkeyup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onkeyup="alert('A key is released over an element')" >
The onkeyup event occurs when a key is
released over an element.
</body>
</html>
Event "onmousedown" value(s): One or more script statements each ended with a semicolon.
- The onmousedown event occurs when the pointing device button is pressed over an element.
Attribute "onmousedown" example:
<html>
<head>
<title>onmouseup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseup="alert('The mouse button is pressed down')" >
The onmouseup event occurs when the pointing
device button is released over an element.
</body>
</html>
Event "onmousemove" value(s): One or more script statements each ended with a semicolon.
- The onmousemove event occurs when the pointing device is moved while it is over an element.
Attribute "onmousemove" example:
<html>
<head>
<title>onmousemove Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmousemove="document.body.text='red'" >
The onmousemove event occurs when the
pointing device is moved while it is over an element.
</body>
</html>
Event "onmouseout" value(s): One or more script statements each ended with a semicolon.
- The onmouseout event occurs when the pointing device is moved away from an element.
Attribute "onmouseout" example:
<html>
<head>
<title>onmouseover and onmouseout Event attributes</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseover="document.body.text='red'"
onmouseout="document.body.text='black'" >
The onmouseover event occurs when the
pointing device is moved onto an element.<br>
The onmouseout event occurs when the
pointing device is moved away from an element.
</body>
</html>
Event "onmouseover" value(s): One or more script statements each ended with a semicolon.
- The onmouseover event occurs when the pointing device is moved onto an element.
Attribute "onmouseover" example:
<html>
<head>
<title>onmouseover and onmouseout Event attributes</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseover="document.body.text='red'"
onmouseout="document.body.text='black'" >
The onmouseover event occurs when the
pointing device is moved onto an element.<br>
The onmouseout event occurs when the
pointing device is moved away from an element.
</body>
</html>
Event "onmouseup" value(s): One or more script statements each ended with a semicolon.
- The onmouseup event occurs when the pointing device button is released over an element.
Attribute "onmouseup" example:
<html>
<head>
<title>onmouseup Event attribute</title>
</head>
<body bgcolor="Silver" text="Blue"
onmouseup="alert('The mouse button is released')" >
The onmouseup event occurs when the
pointing device button is released over an element.
</body>
</html>
The colgroup element can contain the following element(s):
Elements | Description |
---|---|
col | This element defines attributes common to a table column. |
The colgroup element can be contained in the following element(s):
Elements | Description |
---|---|
table | The HTML table model allows you to arrange text, images, links, forms, form fields, other tables, etc. into rows and columns of cells. |
© 2010 by Finnesand Data.
All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the
correctness in the pages or source codes.
The risk of using this web-site pages or any program
codes from this website is entirely at the individual user.