DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

HTML <colgroup> Column Group Tag

#learnhtml #htmlc

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

tag and the parent of the tag. This tag is useful for applying styles to entire columns , instead of repeating the styles for each column, and for each row.

đź’ˇ Tips : You can use the HTML

tag within the tag to apply different properties to a column within a

.

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 |
element. This tag should appear after the tag inside the |

| 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:

Result

Download Sample File:

HTML-Colgroup-TagDownload

Attributes:

The

tag supports the global attributes and the event attributes.

th, td{ padding: 20px; }

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

Browser Support

Related Articles:

The post HTML Column Group Tag appeared first on Share Point Anchor.



Top comments (0)

Read next

infosparklabs profile image

QuickInfo: AI-Powered Wikipedia Companion Built with Next.js and Google's Gemini

InfoSpark Labs -

jelena_petkovic profile image

Sve što treba da znate o `FormData` objektu u JavaScript-u

Jelena Petkovic -

digvijay-bhakuni profile image

Cracking the Proxy Puzzle: Forward vs Reverse 🧩

Digvijay Bhakuni -

adityabhuyan profile image

How Edge Computing is Revolutionizing Data Processing and IoT Applications

Aditya Pratap Bhuyan -