HTML colgroup tag

By | March 19, 2020

In this chapter, we will learn about <colgroup> tag of HTML let’s see and understand how this tag works.<colgroup> tag is used to specify a set of pens inside the table. A root container of one or more elements is used to apply various properties to the HTML element.

Instead of repeating the cello for each call for each individual cell, use <colgroup> tag of HTML to apply the cello to the entire column.

Use <col> tags to show various properties within <colgroup> tag.

colgroup Syntax:-

<colgroup>..........</colgroup>

Browser Support:-

All modern browsers support this tag of HTML.

Value Attribute Description
left
right
center
justify
char
align Not supported in HTML5.
Aligns the content in a column group
character char Not supported in HTML5.
Aligns the content in a column group to a character
number charoff Not supported in HTML5.
Sets the number of characters the content will be aligned from the character specified by the char attribute
number span Specifies the number of columns a column group should span
top
middle
bottom
baseline
valign Not supported in HTML5.
Vertical aligns the content in a column group
pixels
% relative_length
width Not supported in HTML5.
Specifies the width of a column group

Example:-

<!DOCTYPE html>
<html>
<head>
	<title>HTML col tag</title>
	<style>
table, th, td {
  border: 1px solid black;
}
</style>
</head>  
<body>

<table>

<colgroup>
	<col span="2" style="background-color: #ccc;">
	<col style="background-color: red;">
</colgroup>

	<tr>
		<th>Name</th>
		<th>Roll No.</th>
		<th>Maths</th>
		<th>Science</th>
	</tr>
	<tr>
		<td>First Name</td>
		<td>10</td>
		<td>89</td>
		<td>80</td>
	</tr>
	<tr>
		<td>Second Name</td>
		<td>11</td>
		<td>90</td>
		<td>70</td>
	</tr>
</table>
	

</body>
</html>

Output:-

for job
learn coding
For result in india
Make Website Make Money
PM Kisan Yojna
USA Program
Read General Knowledge
All Help Line Number

Leave a Reply

Your email address will not be published. Required fields are marked *