col and colgroup tags
by Vijay[ Edit ] 2009-08-18 16:38:13
Often we may need to style some columns in a table then we would often end up by writting a style and then call the style for desired column every row.
for eg:
<style>
.col1{
background color:#454545;
}
.col2{
background color:#abeaaf;
}
</style>
<table><tr><td class=col1>first column</td><td class=col2>second column</td><td>third column</td></tr><tr><td class=col1>second row</td><td class=col2>second row</td><td>second row</td></tr>...</table>
In such situation <col> <colgroup> tags comes handy. The most useful thing is that these tags are supported by all browsers.
Example:
Col
>table border="1">
<col class="col1"/>
<col class="col2"/>
<col class="col3"/>
<col/>
<tr>
<th colspan="4" scope="col">Work Contact Points</th>
</tr>
<tr>
<td>Name</td><td>product code</td><td>price</td><td>Extra info</td>
</tr>
.
.
.
</table>
Output:
Work Contact Points |
|---|
| Name | product code | price | Extra info |
Colgroup
<table width="100%" border="1">
<colgroup span="2" align="left"></colgroup>
<colgroup align="right" style="color:#0000FF;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
Output:
| ISBN |
Title | Price |
|---|
| 3476896 | My first HTML | $53 |
