April 11th, 2007 - by Paul OB

When you have tabular data that is arranged in table columns then it is often good for presentation and usability to highlight one column or perhaps give all columns a different colour or style. If you are interested to find out how to achieve this with minimum fuss then read on as this short article will show you how to easily target the columns in your table using CSS.

First of all, let’s take a look at an example that has already been styled. We will break that down and explain how the effect is achieved.

Colgroup

On more than one occasion, I have seen table columns styled where classes have been added to every cell in the table in order to style each column. However, this is unnecessary because the colgroup element allows us to target each column specifically.

Unfortunately we are limited in the properties we can style for this element. The only properties that the specs say are available for styling are:

  • border
  • background
  • width
  • visibility

Of course browsers vary in their support for these properties and you may find that some browsers support more properties and some support less. IE6 for instance will allow the color property to be applied.

In order to style the borders of columns you would first need to set your table to the collapsed border model:

  1. table{border-collapse:collapse}

However because IE6 and under do not support this border property on colgroup it is best just to stick to using only the background and the width properties which are pretty well supported across modern browsers. Most times you will only want to style the background anyway or set the width so this is still quite useful.

The colgroup element is a container for col elements which we will use to style each of our columns. The number of col elements should relate directly to the number of columns that you have in your table. So for a table with 10 columns you would need to arrange the colgroup and col elements like so:

  1. <table cellspacing="0" cellpadding="0" >
  2.     <colgroup>
  3.     <col class="col1" />
  4.     <col class="col2" />
  5.     <col class="col3" />
  6.     <col class="col4" />
  7.     <col class="col5" />
  8.     <col class="col6" />
  9.     <col class="col7" />
  10.     <col class="col8" />
  11.     <col class="col9" />
  12.     <col class="col10" />
  13.     </colgroup>
  14.  
  15.     <tr>
  16.         ...

The colgroup follows the table caption but before the first tr tag as shown above. Each col element now relates directly to each column in the table and if we add a class to each col element we can style the background (and width if needed) of all the columns in the table.

  1. <col class="col1" />
  2. <col class="col2" />
  3. <col class="col3" />
  4. <col class="col4" />
  5. <col class="col5" />
  6. <col class="col6" />
  7. <col class="col7" />
  8. <col class="col8" />
  9. <col class="col9" />
  10. <col class="col10" />

Span Attribute

As shown above, each col element refers to one table row but you can also use the span attribute to make it span more than one column (don’t confuse this with the span tag as they have nothing in common). If we have 10 rows in our table but we want to style the first 5 columns differently from the last 5 then we use the span attribute as follows:

  1. <col span="5" />
  2. <col span="5" />

You can even use the span in the colgroup and then you don’t need the col elements at all.

e.g.

  1. <colgroup span="10"> </colgroup>

This won’t be much use to us because we want to style individual columns and need the col elements to apply our classes to. You must also make sure that your columns actually match up to the number of columns in your table or you could get an error.

The col elements can be styled in the usual way with css but remember that only background and width are the safe properties for IE6 and under. Here is the full HTML for a multi-coloured table effect.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. table{border-collapse:collapse}
  8. .col1,.col5,.col9{background:red}
  9. .col2,.col6,.col10{background:blue}
  10. .col3,.col7{background:green}
  11. .col4,.col8{background:orange}
  12. td,th{border:1px solid #000;padding:5px}
  13.  
  14. </style>
  15. </head>
  16. <body>
  17. <table cellspacing="0" cellpadding="0" >
  18.     <caption>
  19.     Example Colgroup
  20.     </caption>
  21.     <colgroup>
  22.     <col class="col1" />
  23.     <col class="col2" />
  24.     <col class="col3" />
  25.     <col class="col4" />
  26.     <col class="col5" />
  27.     <col class="col6" />
  28.     <col class="col7" />
  29.     <col class="col8" />
  30.     <col class="col9" />
  31.     <col class="col10" />
  32.     </colgroup>
  33.     <tr>
  34.         <th>red</th>
  35.         <th>blue</th>
  36.         <th>green</th>
  37.         <th>orange</th>
  38.         <th>red</th>
  39.         <th>blue</th>
  40.         <th>green</th>
  41.         <th>orange</th>
  42.         <th>red</th>
  43.         <th>blue</th>
  44.     </tr>
  45.     <tr>
  46.         <td>1</td>
  47.         <td>2</td>
  48.         <td>3</td>
  49.         <td>4</td>
  50.         <td>5</td>
  51.         <td>6</td>
  52.         <td>7</td>
  53.         <td>8</td>
  54.         <td>9</td>
  55.         <td>10</td>
  56.     </tr>
  57.     <tr>
  58.         <td>1</td>
  59.         <td>2</td>
  60.         <td>3</td>
  61.         <td>4</td>
  62.         <td>5</td>
  63.         <td>6</td>
  64.         <td>7</td>
  65.         <td>8</td>
  66.         <td>9</td>
  67.         <td>10</td>
  68.     </tr>
  69.     <tr>
  70.         <td>1</td>
  71.         <td>2</td>
  72.         <td>3</td>
  73.         <td>4</td>
  74.         <td>5</td>
  75.         <td>6</td>
  76.         <td>7</td>
  77.         <td>8</td>
  78.         <td>9</td>
  79.         <td>10</td>
  80.     </tr>
  81.     <tr>
  82.         <td>1</td>
  83.         <td>2</td>
  84.         <td>3</td>
  85.         <td>4</td>
  86.         <td>5</td>
  87.         <td>6</td>
  88.         <td>7</td>
  89.         <td>8</td>
  90.         <td>9</td>
  91.         <td>10</td>
  92.     </tr>
  93. </table>
  94. </body>
  95. </html>

If you run the code above then you should see something like this image below:

Colgroup example

As you can see this is an efficient way of styling the column without the need to class every td in the table. It should be noted that any existing styling on your table will over-rule the colgroup and col elements so you must make sure there are no conflicts with your styling.

There is a little more to the colgroup than has been explained above but as this article has just been a “taster” you can pop over to the w3c site where you can find more examples and information.

Further Reading:

Hixie’s Log
W3c Tables

20 Responses to “Styling Table Columns with CSS”

1 Golgotha

Colgroup eh? Very nice, I had no idea about that little trick. Very handy Paul!

2 Leonardo... from Colombia

Thanks for that brief tutorial!!! Now i can do better styling in my projects with tabular data, and save some space in bandiwth.

By the way, cool website, i could find a lot of help here, thanks guys

4 Around the web | alexking.org

[…] Styling Table Columns with CSS […]

5 links for 2007-04-23 » mhinze.com

[…] Styling Table Columns with CSS (tags: css) […]

6 Sherwin Techico

I’m guessing that if you put a colgroup inside it will supercede those in and . For example:

First Group
Second Group

Is there a workaround? I guess its a scenario when you want to define those columns only in . TIA

7 Sherwin Techico

Hmmm… seems that it doesn’t take markup that well. Here’s what I was testing… http://test.pixelbebop.com/test24/

TIA

8 Paul OB

Hi Sherwin,

That code you are using is invalid I’m afraid. You can’t nest any more colgroups inside the table (or captions for that matter). The colgroup must come before any thead or tr tags and follows the table and caption tags.

You can have more than one colgroup but you can’t have them anywhere else in the table. Their usefulness is when you want to span more than one row but the col element allows individual or multiple cells to be accessed so is more ueseful.

This is valid.

Example Colgroup

First Group
Second Group

etc……

You can’t now setup anymore colgroups to change tbody or tfoot I’m afraid although it would be quite useful. :)

You can only style the whole column from start to finish (top to bottom) although styles directly to the cells themselves will over-ride the colgroup.

9 Paul OB

Hmm, I forgot that the code would be removed – I wonder if this works :

  1. Example Colgroup
  2.    
  3.    
  4.    
  5.    
  6.    
  7.    
  8.    
  9.    
  10.    
  11.    
  12.    
  13.        
  14.             First Group
  15.             Second Group
10 Paul OB

No It doesn’t lol – Here’s the link:

http://www.pmob.co.uk/temp/sherwin.htm

11 Sherwin Techico

Thanks Paul. That just sucks… not “valid” to what “they” had in mind right? Damn the W3C?! =)

I hope they think about this in HTML5 if there is ever one. That is, setting up colgroups to change tbody and/or tfoot.

12 Gary

Hi,

At first this seemed nice.

But I wanted to set the text-align for columns and that doesn’t work.

Like you said, it’s only good for background.

So if I have to put a class in for the alignment on each cell anyway I might as well use that method instead of this.

13 Paul OB

Hi Gary,

Yes it’s a shame that more properties aren’t available for styling but you are limited by the specs to the following as mentioned above:

* border
* background
* width
* visibility

14 MikeL

This is fantastic and simple. I really couldn’t find this info laid out so clearly anywhere else. Thanks.

15 Sharon

How can colgroup be used with Spring tags to change the color of an entire column when a specific column is sorted when clicked.

16 Jeetal

Thanks very much! This is exactly what I needed.

17 id meneo

It’s been a while I can’t find the way to have different numbers of cellsin my table raws. Exemple:

——First Raw one cell—–
— cell —- cell —-
— cell —- cell —-

?plz help thanks

18 Paul OB

Hi,

Add colspan=”2″ if you want the cell to span 2 cells.

This should answer your question:
http://reference.sitepoint.com/html/td/colspan

19 id meneo

Oh man, thank you. I lost hours on that one.

20 tab sweep 10/31/12 1:20:14 PM | Poemcraft

[…] Styling Table Columns with CSS […]

mulberry sale spyder womens jacket cheap new balance 574 mulberry outlet cheap new balance 574 arcteryx outlet mulberry sale spyder womens jacket mulberry sale spyder womens jacket mulberry outlet mulberry outlet new balance 574

Popular Articles

Top 10 Commentators


Subscribe to this feed! Subscribe by Email!

Random Bits Podcast

You need to download the Flash player from Adobe

Blogs Worth Reading