Highlighting the Background Color of a Table Column at the Cursor Position

In this article, we will explain how to highlight a column in a table (table) in red when you bring the cursor to it as a technique that helps improve the user experience of the website. Such visual effects can improve the readability of tables, especially those containing a lot of data, and make it easier for viewers to track information.

In this guide, we will explain how to easily highlight a column of a table using HTML, CSS, and JavaScript. We will carefully explain each step so that it is easy to understand even for beginners.

CSS description to highlight table columns

First, we will use CSS to organize the overall design and structure of the table. The following is an example of a style sheet using the table #tbl1. This CSS centers the table and sets the default style for each element.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:16px;
  text-align:center;
  font-weight:normal;
  padding:10px 0;
  position: relative;
}
#tbl1{
  width: 700px;
  margin: 0 auto;
}
#tbl1 tr,
#tbl1 th,
#tbl1 td {
    background-color: inherit;
    font-size: 14px;
    height: 40px;
}
#tbl1 thead,
#tbl1 tfoot {
    background-color: #cccccc;
}
#tbl1 {
    border: solid 1px #000000;
}
</style>

HTML description to highlight table columns

Next, we will explain the HTML structure of the table (id = “tbl1”) itself, which will be highlighted. We will use the colgroup tag to set the column group so that it can be easily controlled from JavaScript.

<h1>テーブル（表）の列にカーソルをもっていくとカーソル位置の列が赤くハイライトします。</h1>

<table id="tbl1">
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <colgroup span="1"></colgroup>
    <thead>
        <tr>
            <th>header1</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer1</th>
            <th>footer2</th>
            <th>footer3</th>
            <th>footer4</th>
            <th>footer5</th>
        </tr>
    </tfoot>
</table>

Highlighting columns with JavaScript

Finally, we will introduce JavaScript to highlight the columns of the table (id = “tbl”). When the cursor moves over a cell (onmouseover), the background color of the entire column is changed to red, and when the cursor moves away (onmouseout), the background color is returned to its original color.

<script type="text/javascript">
window.onload = function(){
    var $tbl1Table = document.getElementById( "tbl1" );
    var $tbl1Colgroup = $tbl1Table.getElementsByTagName( "colgroup" );
    var $tbl1THeadCells = $tbl1Table.tHead.rows[0].cells;
    var $tbl1TFootCells = $tbl1Table.tFoot.rows[0].cells;
    var $tbl1Rows = $tbl1Table.rows;
    for ( var $rowidx = 0; $rowidx < $tbl1Rows.length; $rowidx++ ) {
        var $tbl1Cells = $tbl1Rows[$rowidx].cells;
        for ( var $cellIndex = 0; $cellIndex < $tbl1Cells.length; $cellIndex++ ) {
            $tbl1Cells[$cellIndex].onmouseover = function(){
                changebkc( $tbl1Colgroup[this.cellIndex], "red" );
                changebkc( $tbl1THeadCells[this.cellIndex], "red" );
                changebkc( $tbl1TFootCells[this.cellIndex], "red" );
            };
            $tbl1Cells[$cellIndex].onmouseout = function(){
                changebkc( $tbl1Colgroup[this.cellIndex], "" );
                changebkc( $tbl1THeadCells[this.cellIndex], "" );
                changebkc( $tbl1TFootCells[this.cellIndex], "" );
            };
        }
    }
}

function changebkc( $elementReference, $color ){
    $elementReference.style.backgroundColor = $color;
}
</script>

Demo page to highlight the background of the table (table) column at the cursor position in red

To see how this function actually works, please check the operation on the demo page below. You will be able to deepen your understanding through specific operation methods.

Demo page to highlight the background of the table (table) column at the cursor position in red

Summary

In this article, we introduced how to realize table column highlighting by combining CSS, HTML, and JavaScript. This technique is very useful for visually separating and making data easier to see. Furthermore, by adding visual feedback, users can browse data efficiently.

Please apply this technique to create user-friendly web content.

　
※Please use it at your own risk.
　Please do not use the Google Analytics tag in the head tag of the demo page.