Simple Table Column Highlighting

Published January 6, 2014 by saurav.roy.

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.

Read On…