Page content

Highlighting HTML columns with jQuery and CSS

Sometimes we want to highlight table columns when they are hovered over. Table rows are easy - it's as simple as adding tr:hover{background:red;} to your CSS. This will cause all table cells in a row to be red when the row is hovered over. However, columns are not as easy. The main reason behind this is that HTML tables are grouped by row, not by column. This means that while it is easy to select a group of table cells as a row (using tr in your CSS, or targeting tr tags in your javascript), it is not as easy to group table cells by columns.

You may think that you can use the html colgroup and col tags, but alas, such is not the case. They will allow for grouping elements by columns. However, these tags are deceptive. While they do allow for some limited styling of columns, they are not actually parents of the td tags that are in the column, and do not respond to the :hover attribute in CSS, nor do they trigger the javascript onmouseover event. Now, if this last statement didn't make sense to you, don't worry, it's not really important. What it is important is that you understand that it takes javascript to be able to highlight an HTML table column. And that is what this tutorial is going to show. It's possible to do this using pure javascript, but I'm a jQuery guy, so I will be showing my jQuery method of doing this.

CSS Sprites for Irregular Shapes

I like to use the CSS Sprites technique on my sites, as it cuts down HTTP requests. However, it can sometimes be tricky to figure out how to put together an irregular shape in order to be able to use the method. An example is a site I was recently developing that used a 'speech bubble' like this:


I needed to make the speech bubble expandable in height to allow for different unknown amounts of text. So using the image as-is doesn't work. Of course the easy way is to slice the image into three pieces.