The Column Group tag represents a group of one or more columns within a table in an HTML document. The main purpose of this tag is to specify the properties for a group of columns. A single HTML table can include multiple tags.
The element is a child element of the
Tips : You can use the HTML
Estimated reading time: 3 minutes
Syntax:
This tag contains both the starting
tag and ending tag. The content is written between these two tags.
<colgroup> Write your content here </colgroup>
HTML
Tag:th, td{ padding: 20px; }
| HTML
tag | Sets a group of columns in HTML table || Content categories | None |
| Permitted content | None or empty – When the “Span” attribute is present. Zero – attribute is not present. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | HTML TableColElement. |
Sample of HTML
Tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<h2>Example of Colgroup Tag</h2>
<table border="1">
<colgroup>
<col style="background-color: #DCF2BC" width="40">
<col span="2" style="background-color: #D9BCF2 " width="80">
</colgroup>
<tr>
<th>Name</th>
<th>Test1</th>
<th>Test2</th>
</tr>
<tr>
<td>Kate</td>
<td>345</td>
<td>412</td>
</tr>
<tr>
<td>Steve</td>
<td>457</td>
<td>460</td>
</tr>
<tr>
<td>Tom</td>
<td>401</td>
<td>405</td>
</tr>
</table>
</body>
</html>
Result:

Download Sample File:
Attributes:
The
tag supports the global attributes and the event attributes.th, td{ padding: 20px; }
Attribute | Value | Description |
---|---|---|
align | The align attribute will help to set the alignment of the content of the column. Not supported in HTML5. | |
left | It aligns to the left. | |
right | Used to the right alignment. | |
center | Helps to align the center. | |
justify | This value helps to stretch the lines so that each line has equal width. | |
char | It is used to align a special character with a minimum offset , which is defined by the “char” and “charoff” attributes. | |
char | character | This value will align the content related to an |
charoff | number | Helps to shift the content of the cell relative to the character specified as the value of the attribute to the right (positive values) or to the left (negative values). It is used only if the attribute is aligned = “char”.** Not supported in HTML5.** |
span | number | Sets the quantity of columns , the properties of which are determined by the |
valign | The “valign” attribute helps to align the content vertically. | |
top | It helps to align at the top of the line. | |
bottom | This value used to align the bottom edge. | |
middle | Used for center or middle alignment. | |
baseline | This value is used for baseline alignment. Not supported in HTML5. | |
width | % pixels relative_length | It will set the width of the column. Not supported in HTML5. |
Browser Support:

Related Articles:
The post HTML Column Group Tag appeared first on Share Point Anchor.
Top comments (0)