Simple Table Column Highlighting

Published January 6, 2014 by CSS Newbies.

A table with the third column and second row highlighted.

Though they’re often treated like the redheaded stepchild of modern web design, tables are still one of the best ways of displaying concise tabular data. But the more data that gets packed into a table, the tougher they get to read. Zebra striping the rows helps some, and column striping can help even more.

One design technique I’ve always enjoyed is highlighting the row and column of any cell that the user hovers over. Highlighting a cell’s row is simple, because table cells are organized into rows: all you have to do is apply a style to tr:hover, and you’re done. Columns are harder because there’s no inherent structure for a column in a table, which means loads of complex JavaScript is inevitable. Or so I thought.

I’ve been building HTML tables for nearly two decades now. Today I realized two things:

  1. There’s such a thing as a col tag for tables (who knew?).
  2. It’s going to make my life easier.

The col tag is a special content-less element that lives inside of your tables. They’re used to specify columns in tables – columns that can be styled. The general use looks like this:

col 1 col 2 col 3

Unfortunately, since our table cells aren’t direct descendants of the col tag (like they are to the tr tag) and our columnss have no content, we can’t just use col:hover. However, having columns make the JS we have to write much, much simpler, particularly when using a library like jQuery. Check out this example:

See the Pen 45a262288e909448afed48374a9b8935 by Rob Glazebrook (@rglazebrook) on CodePen

I’m using a few nice jQuery tricks to make this as simple as it is. We’re using jQuery’s hover function, which fires both on mouseenter and mouseleave (this is important). When someone hovers (or un-hovers) over a cell, we first move up to the parent table. Then we find the col tag that has the same index as our td tag. (Indexes are zero-based, so the 3rd col in the table will have an index of 2… as will the 3rd cell in any row.)

Once we’ve found our column, we toggle a class of “hover” on it. ToggleClass is a nice shortcut function that adds a class if it’s not present and removes it if it’s already there. This is perfect for us, because jQuery’s hover function fires once when the cursor moves over our cell, and again when the cursor leaves the cell.

Once our JS is in place, the CSS becomes a piece of cake: just write styles for both tr:hover and col.hover. I’m using a semitransparent background color in the example above, so the cell we’re hovering over looks even darker.

And there you have it. Three lines of JS and two CSS rules later, we have an easier-to-read table.

11 Responses

  1. Pingback: Intelligent Select Box Filtering | WarWebDev

  2. Pingback: Cross-Browser Support for HTML5 Placeholder Text in Forms | WarWebDev

  3. Nila (reply)

    This article is very interesting but it took me a long time
    to find it in google. I found it on 17 spot, you should focus on quality backlinks building, it will
    help you to rank to google top 10. And i know how to
    help you, just type in google – k2 seo tips and tricks

  4. Pingback: The Pixelize jQuery Plugin | Web Design Articles From An Actual Living Web Professional

  5. Mike W. (reply)

    This is very informative and something I was looking to achieve for one of our clients. As you originally stated, I thought it would require extensive JS because I was also unaware of the col tag. Thanks for this post. One issue I have however is that it doesn’t work if the cells/rows already have a background set. Removing the background from the cells and just placing it on the COL seems to work but then I lose my border-radius on the corner cells. I’ve been unable to find a way to have both a background with hover and border-radius simultaneously. Does anyone have an idea how to fix this?

  6. Friv juegos (reply)

    Hola estoy encantada de visitar vuestra web me parece super buena.

    Yo soy una escolar universitaria que me encanta el desarrollo web,
    el bosquejo y sobre todo la creación de aplicaciones de juegos para móviles.

    Me gusta mucho vuestra blog me parece super
    interesante.
    Os felicito por vuestra web, soy desde hoy una admiradora vuestra.

    Hola me ha gustado mucho tu articulo
    Es imponente, buena averiguación la que he encontrado.
    Muchos besitos.
    Por fin alguien que me lo ha explicado para que yo
    lo puede comprender. Estoy excesivo contenta.
    Grande, que contenta estoy, es lo mas. Gracias.

  7. Pingback: The Pixelize jQuery Plugin - Orlando Web Design - Orlando Web DesignOrlando Web Design

  8. Pingback: Embedding Video in a Responsive Site - Orlando Web Design - Orlando Web DesignOrlando Web Design

  9. Pingback: Wholly – jQuery Plugin to Highlight Table Rows and Columns

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>