Colgroup Tag
Colgroup defines a group of columns in the table and allows the user to set the properties of these columns. It is placed immediately after the table tag. It works very much like the <col> tag and needs to be closed. It is useful when borders have to be put between groups of columns instead of every column.
The <colgroup> tag used in XHTML is exactly similar to the <colgroup> tag used in HTML.
Example |
<table border=2> |
<colgroup> </colgroup>
<colgroup span=2> </colgroup> |
<tr> <th>Person</th> <th>Jokes1</th> <th>jokes2</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> <td>tennis jokes</td></tr> |
</table> |
| |
Attributes of Colgroup Tag
Span
Span indicates how many columns are there in the group. It works similarly as in <col span=….>. The default value for span is 1.
Example |
<table border=2> |
<colgroup span=2 color=red> </colgroup> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Align
Align sets the horizontal alignment of the cells in the column group. It just works like it works in the <col> tag. It takes up four values which are left, right, center and justify, but justify is poorly supported by the browser.
Example |
<table border=2> |
<colgroup span=2 align=center> </colgroup> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
Width
Width sets the width of each column in the column group. If a column group has a width of 20% and has two columns in the group, then width of each column is 20%.
Example |
<table border=2> |
<colgroup span=2 width=20%> </colgroup> |
<tr> <th>Person</th> <th>Jokes</th> </tr> |
<tr> <td>Mac</td> <td>Cricket Jokes</td> </tr> |
</table> |
| |
The following example illustrates the above explained tags in a web page:
Example |
<html> |
|
<head> |
<title> My list of jokes </title> |
</head> |
|
<body> |
|
<h1> Some More Tables </h1> |
|
<table border=3 cellpadding=4 bordercolor="blue"> |
<caption><b> Good Jokes </b></caption> |
<col align=right> </col> |
<col bgcolor="#CCFF99"> </col> |
<tr><th> Joke Type </th> <th> Joke </th> </tr> |
<tr><td>1.</td> <td bordercolor=red> Classic Jokes </td> |
<tr><td>2.</td> <td bordercolor=red> Tennis Jokes </td> |
<tr><td>3.</td> <td bordercolor=red> Cricket Jokes </td> |
</table> |
|
<br/> <br/> |
|
<h2> Let's read a joke!</h2> |
|
<table border=3 cellpadding=4 bordercolor="blue"> |
<colgroup span=2 align=center bgcolor="#CCFF99"> </colgroup> |
<tr> <th> Joke Type</th> <th> Joke </th> </tr> |
<tr> <td>Blonde Joke </td> <td> A brunette says to a blonde, "Look! A dead bird!" and the blonde looks up and says, "Where?"</td> </tr> |
</table> |
|
</body> |
</html> |
| |
|
