Attributes of Colgroup Tag
Span
Span indicates how many columns are in the group. It works same as in <col span=….>. The default 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 works like it works in the <col> tag. It takes up four values- 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 tags illustrated above are applied in the following example:
Example: |
|
| <html> |
| <head> |
| <title> My list of jokes </title> |
| </head> |
| |
| <body background ="myimage.jpg" text = “blue”> |
| <h1 align=center> Some More Tables </h1> |
| |
<table border=3 bgcolor=lime align=center cellpadding=4
bordercolor="blue"> |
| <caption align=left><b> Good Jokes </b></caption> |
| <col align=right> </col> |
| <col bgcolor="#CCFF99"> </col> |
| |
| <tr bgcolor="#CCCC99"><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 align=left> Let's read a joke!</h2> |
<table border=3 bgcolor=lime align=left 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> |
| |
| |
This is how the web page looks:
|
