Leave That Thing Alone Blog
Using col to add a style to an entire table column
By adding a style to a COL it is possible to add (some) styles to an entire table column without having to specify classes in each TD of the table column.
Adding styles with colgroup and col was new to me so i thought I'd share. There are limitations to the types of styles that can be applied to a col. Here's a basic example:
| Col 1 | Col 2 | Col 3 | Col 4 | Col 5 |
|---|---|---|---|---|
| a | b | c | d | e |
| f | g | h | i | j |
Example code:
<style media="all" type="text/css">
table#testcol {
width:300px;
border:#333 1px solid;
background:#f8f8f8;
}
table#testcol col.altcol {
background:#69C;
}
</style>
<table id="testcol">
<colgroup>
<col></col>
<col span="2" class="altcol"></col>
<col></col>
<col class="altcol"></col>
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
table#testcol {
width:300px;
border:#333 1px solid;
background:#f8f8f8;
}
table#testcol col.altcol {
background:#69C;
}
</style>
<table id="testcol">
<colgroup>
<col></col>
<col span="2" class="altcol"></col>
<col></col>
<col class="altcol"></col>
</colgroup>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td>g</td>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
Comments
There are no comments for this entry.
[Add Comment] [Subscribe to Comments]