HTML <colgroup> Column Group Tag
Tags: learnhtml, htmlc
Published: 2021-05-10 05:20:39

---
title: HTML <colgroup> Column Group Tag
published: true
date: 2021-02-17 12:13:11 UTC
tags: LearnHTML,HTMLC
canonical_url: https://sharepointanchor.com/learn-html/html-colgroup-column-group-tag/
---

The **<colgroup>**  **Column Group tag** represents a **group of one or more columns** within a table in an [HTML](https://sharepointanchor.com/learn-html/ "HTML") document. The main purpose of this tag is to **specify the properties for a group of columns**. A single [HTML](https://sharepointanchor.com/learn-html/ "HTML") table can include **multiple <colgroup> tags**.

The **<colgroup>** element is a child element of the **<table>** tag and the parent of the **<col>** tag. This tag is useful for **applying styles to entire columns** , instead of repeating the styles for each column, and for each row.

![💡](https://s.w.org/images/core/emoji/13.0.1/72x72/1f4a1.png) **Tips** : You can use the [HTML](https://sharepointanchor.com/learn-html/ "HTML") **<col>** tag within the **<colgroup>** tag to **apply different properties** to a column within a <colgroup>.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 3 minutes

## Syntax:

This tag contains both the **starting <colgroup> tag** and **ending </colgroup> tag**. The content is written between these two tags.

```

<colgroup> Write your content here </colgroup>

```

### HTML <colgroup> Tag:
<style> th, td{ padding: 20px; } </style>

| HTML <colgroup> tag | Sets a group of columns in [HTML](https://sharepointanchor.com/learn-html/ "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 | <table> element. This tag should appear after the <caption> tag inside the |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | No role permitted |
| DOM interface | [HTML](https://sharepointanchor.com/learn-html/ "HTML") TableColElement. |

## Sample of HTML <colgroup> 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/result-18.png)<figcaption>Result</figcaption>

### Download Sample File:

[HTML-Colgroup-Tag](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Colgroup-Tag.html)[Download](https://sharepointanchor.com/wp-content/uploads/2021/02/HTML-Colgroup-Tag.html)

## Attributes:

The  **<colgroup>**  tag supports the  **global attributes**  and the  **event attributes**.

<style> th, td{ padding: 20px; } </style>

| 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 <col> element to a character**. It is used only if the attribute is aligned = **“char”.**** Not supported in HTML5.** |
| 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 <col> element. The **number must be a positive** integer. If the parameter is not specified, the **default value is 1**. |
| 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <body> Body Tag](https://sharepointanchor.com/learn-html/html-body-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <basefont> Basefont Tag](https://sharepointanchor.com/learn-html/html-basefont-tag/)**

The post [HTML <code><colgroup></code> Column Group Tag](https://sharepointanchor.com/learn-html/html-colgroup-column-group-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).