Html <colgroup> Tag
A HTML table's column group is specified by the "colgroup" tag. If you want to apply various properties to one or more <col> elements in an HTML table, then you require to the use a parent container.
Syntax
The colgroup tag is denoted by the characters <colgroup>…..</colgroup>. It can either contain one or more <col> tags, which can be used to represent
columns within the <colgroup> element. The <col> element can have a span
attribute which specifies how many columns to span.
<colgroup>Write Column Content Here</colgroup>
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Colgroup</h2>
<p>Add the colgroup with a col element that spans over two columns to define a style for the two columns:</p>
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>
</body>
</html>
Output:
Attribute
The global attributes are present in this element.
Span
In the <col> element, this attribute specifies the amount of succeeding columns. It is always represented by the integer value and its default value is 1.
Align
This enumerated attribute describes how the content of each column cell will be aligned horizontally. This tag do these multiple following tasks:
- Putting the content in the cell's left-most position.
- Centering the cell's content.
- Aligning the content so that it is to the cell's right.
- To justify the text so that it fits within the cell by adding spaces to the text.
If the value is not set as the alignment in the align attribute of the <colgroup> element, then you have to determine the left as its value.
Bg-color
It is the color of the table's background. It is a 6-digit hexadecimal RGB code where # is a prefixed letter. You could also use any one color keyword instead of ‘#’.
You can also usee CSS background-color property to achieve a comparable
result.
Char
The character to be used to align the content in a column is selected by this property. When attempting to align numerical or monetary values, the period (.) is used as a value. This attribute is not taken into account if the alignment is not set to char.
Charoff
This attribute specifies how many characters of the column data should be offset from the alignment characters.
valign
This attribute specifies the vertical alignment of the text within each column cell. This attribute has the following possible values:
- The baseline value will positioned the text as close to the bottom of the cell as physically possible by aligning it on the baseline of the characters rather than the bottom of the characters. All the same-sized characters produce the same result as the bottom.
- The bottom value will positioned the text as close to the bottom of the column’s cell as possible.
- The middle value will centered the text within the cell.
- The top value will positioned the text as close to the top of the column’s cell as possible.
Width
This attribute specifies the default column width for the current column group. This attribute can also have the special form 0*, which indicates that each column in the group should have the minimum width that will be required to hold its contents.
Difference Between Col and Colgroup Tag
The semantic distinctions are the only thing that separates the COL tag and COLGROUP tag. The <COL> tag can undoubtedly span across more than two columns of the table, while COLGROUP tag groups the similar tasks according to meanings.
Browser Compatibility
Chrome
Opera
Firefox
Safari
Conclusion
A HTML table's column group is specified by the "colgroup" tag. If you want to apply various properties to one or more <col> elements in an HTML table, then you require to the use a parent container. Colgroup tag is little bit different from the Col tag. Col specifies the column in the table while Colgroup groups the Column according to their meaning.