![\"A](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2014\/01\/cssnewbie-table-highlighting1.png\")
<\/p>\n<\/p>\n
Though they\u2019re 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<\/a> helps some, and column striping can help even more.<\/p>\n One design technique I’ve always enjoyed is highlighting the row and column of any cell that the user hovers over. Highlighting a cell\u2019s row is simple, because table cells are organized into rows: all you have to do is apply a style to tr:hover, and you\u2019re done. Columns are harder because there\u2019s no inherent structure for a column in a table, which means loads of complex JavaScript is inevitable. Or so I thought.<\/p>\n I’ve been building HTML tables for nearly two decades now. Today I realized two things:<\/p>\n <\/p>\n The col tag is a special content-less element that lives inside of your tables. They\u2019re used to specify columns in tables \u2013 columns that can be styled. The general use looks like this:<\/p>\n Unfortunately, since our table cells aren\u2019t direct descendants of the col tag (like they are to the tr tag) and our columnss have no content, we can\u2019t 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:<\/p>\n See the Pen 45a262288e909448afed48374a9b8935<\/a> by Rob Glazebrook (@rglazebrook<\/a>) on CodePen<\/a><\/p>\n\n
\n
\n col 1<\/td>\n col 2<\/td>\n col 3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n <\/pre>\n