col and colgroup tags

by Vijay 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
Nameproduct codepriceExtra 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 TitlePrice
3476896My first HTML$53


Tagged in:

1427
like
0
dislike
0
mail
flag

You must LOGIN to add comments