<colgroup> tag:
It is used to apply different properties on more than one column in a table by grouping columns. Like with the help of this tag we can apply CSS on more than one column otherwise we have to apply CSS individually on each column and row.
We can also use other attribute with colgroup tag which are as follows:
| Attribute |
Value |
| align |
left, right, center, justify, char |
| width |
pixels, %, relative_length |
| charoff |
number |
| span |
number |
| valign |
top, middle, bottom, baseline |
Using col tag within colgroup tag we can provide different properties for columns.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<table class="table1">
<colgroup>
<col span="2" style="background-color:grey">
<col style="background-color:white">
</colgroup>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone Number</th>
</tr>
<tr>
<td>Ashley</td>
<td>Christchurch</td>
<td>55547862214</td>
</tr>
<tr>
<td>Michael</td>
<td>Sydney</td>
<td>56413289489</td>
</tr>
<tr>
<td>Smith</td>
<td>Christchurch</td>
<td>96447862214</td>
</tr>
</table>
</body>
</html>
In the above example using colgroup tag we have given grey background-color to first two columns and white color to the third one.
You can check output here: https://jsfiddle.net/sp3od6nw/
0 Comment(s)